1

我正在使用 jQuery Booklet Plugin 并且有一本很好用的小册子。但是我有一个挂断。这本小册子相当大，有很多图片（大约 50 张），第一次访问页面时加载速度很慢。我想做的是获取我目前拥有的脚本并加载前 20 张图像（大致）然后显示小册子，而其余图像在后台加载。这是我正在使用并想修改它的脚本：

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);
  });

});

我将如何修改此代码以加载前 20 张图像，然后显示小册子？请提供例子。

4

2 回答 2

1

查看您发布的逻辑，您可以更改cnt_images = 20. 如果有其他依赖于此的逻辑，那么当您检查该loaded值时，不要检查它，而是检查cnt_images它20。

于 2012-09-21T18:34:21.047 回答
1

我需要查看 HTML 才能确定，但​​更改定义的行cnt_images应该可以解决问题。更改此行：

var cnt_images = $mybook_images.length;

这么说：

var cnt_images = 20;

于 2012-09-21T18:33:53.917 回答