加載前20個圖像，然後顯示頁面

我正在使用jQuery小冊子插件並且有一本很棒的小冊子。但我有一個掛斷。這本小冊子相當大，有許多圖像（大約50張），並且您第一次訪問該頁面時載入速度很慢。我想要做的是採用我現在使用的腳本，並加載前20張圖像（大致），然後顯示小冊子，而其餘圖像在後臺加載。下面是我使用，並想修改劇本：加載前20個圖像，然後顯示頁面

$(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個圖像，然後顯示小冊子？請提供例子。

來源

2012-09-21 L84

我需要查看HTML才能確定，但更改定義cnt_images的行應該可以做到。更改此行：

var cnt_images = $ mybook_images.length;

要這樣說：

變種cnt_images = 20;

來源

2012-09-21 18:33:53 thewebguy

看着你發佈的邏輯，你可以改變cnt_images = 20。如果還有其他邏輯依賴於此，那麼當您檢查loaded值時，而不是根據cnt_images檢查它，請檢查它與20。

來源

2012-09-21 18:34:21

加載前20個圖像，然後顯示頁面

回答

相關問題