LazyLoad插件

Question

我正在使用jQuery Lazy Load在頁面上加載縮略圖我有一個每頁約100多個縮略圖的列表。這個插件工作得很完美，直到我引入插件Quick Pagination，一次顯示9個縮略圖，併爲用戶提供下一個和上一個。

當點擊Next或Previous時，您會看到灰色的佔位符圖像，因爲Scroll不再是一個因素。

我試過不同的事件，甚至創建了我自己的，這隻會加載所有縮略圖，甚至低於（下一個和上一個）閾值的縮略圖。

有沒有觸發滾動事件？就像這個人已經完成>http://blog.3circlestudio.com/development/how-to-use-lazy-load-with-easy-slider-1-7/

我也嘗試過這一點，沒有運氣。

$('.thumbs').lazyload({ placeholder:'/thumbnail.gif' }); 

沒有快速分頁和滾動的關於作品！

$('#thumbnails').paginate({ pager: $('div#pagination') }); 

介紹paginate的作品來生成9個縮略圖列表，每個都打破lazyload。我猜我想問的是，無法弄清楚每次點擊下一步鏈接時如何調用縮略圖。

Answer 1

我想通了，它是工作！在調用Next和Previous時，我在Quick Pagination中創建了一個函數。在這個函數中，我插入了以下內容。

var scrollTop = function() { 
    $('html, body').animate({scrollTop:0}, 'slow', function() { 
     $(window).trigger('scroll'); 
    }); 
} 

通過將動畫伴隨着滾動頂部我解決了該問題，以滾動頁面，並通過地方$（窗口）.trigger（「滾動」）;在動畫中觸發滾動並加載下一組照片。希望這對其他人有意義 - 爲了我的目的，它正在工作。

是的！

Answer 2

我認爲這兩個插件是完全相反的。我建議使用lazyload和scrollto插件。這應該得到你在找什麼，只要確定調用lazyload如下

$('thumbs').lazyload({ 
    placeholder:'/thumbnail.gif', 
    container:$('#thumbnails') 
}); 

Answer 3

jquery LazyLoad plugin在FF3.6上不適用於我。如果我用Firebug檢查演示頁面，我可以看到所有圖像都加載了onload。

你可以看看這個名爲JAIL的插件，它可以很好地工作（有很少的例子）。我建議在打開示例頁面時保持Firebug的Net選項卡打開。

Answer 4

如下發現：https://stackoverflow.com/a/17171241/891052 使用這種觸發lazyload

$(window).resize();