1

私はjQueryBookletPluginを使用していて、うまく機能する小冊子を持っています。ただし、ハングアップが1つあります。小冊子はかなり大きく、多くの画像（約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 に答える