Question

I am using the jQuery Booklet Plugin and have a booklet that works great. However I have one hangup. The booklet is fairly large and has many images (about 50) and the first time you visit the page it is slow to load. What I would like to do is take the script I currently have and load the first 20 images (roughly) then show the booklet while the rest of the images load in the background. Here is the script I am using and would like to modify it:

JS

$(function() {
  var $mybook       = $('#mybook');
  var $bttn_next        = $('#next_page_button');
  var $bttn_prev        = $('#prev_page_button');
  var $loading      = $('#loading');
  var $mybook_images    = $mybook.find('img');
  var cnt_images        = $mybook_images.length;
  var loaded            = 0;
  //preload all the images in the book,
  //and then call the booklet plugin

  $mybook_images.each(function(){
    var $img    = $(this);
    var source  = $img.attr('src');
    $('<img/>').load(function(){
      ++loaded;
      if(loaded == cnt_images){
        $loading.hide();
        $bttn_next.show();
        $bttn_prev.show();
        $mybook.show().booklet({
         //Booklet Options
        });
      }
    }).attr('src',source);
  });

});

How would I modify this code to load the first 20 images and then show the booklet? Please provide examples.

Answer 1

I’d need to see the HTML to know for certain, but changing the line that defines cnt_images should do the trick. Change this line:

var cnt_images = $mybook_images.length;

To say this:

var cnt_images = 20;