直到使用Lazy Load插件滾動才顯示圖像

Question

我正在開發phonegap應用程序，並使用Lazy Load插件（http://www.appelsiini.net/projects/lazyload）。

我遇到的問題是圖像直到用戶滾動才顯示。我有一個演示here。如果您點擊CauseComprehensiveSchoolGallery，您可以看到圖像在滾動之前不會變爲可見。我已經看過這個問題here和here並嘗試了所有的解決方案，但都沒有工作。

圖片代碼如下所示：

<img class="lazy" data-original="<%= item.thumbnail %>" height="70" width="70" > 

和javscript是：

$('img.lazy').lazyload(); 

正如你所看到的，高度和寬度是一組，這是通常的解決方法提出。我也試過：

$("img.lazy").lazyload({ 
    skip_invisible : false 
}); 

和

$(window).resize(); 

，並以模擬滾動

$('body').scrollTop(10); 

但同樣，圖像仍然不顯示，直到我滾動。有任何想法嗎？

Answer 1

有兩種方法來解決這個問題：

1. 觸發「滾動」事件手動強制lazyload腳本加載圖片：

2. 使用另一種延遲加載腳本（如jQuery LazyLoadXT）工作正常。

   - 如果使用這個插件，確保包括插件和的「水平滾動溢出容器」傳遞給lazyLoadXT

   初始化左右滾動功能 - （如容器，項目「.wrapper」），像這樣：$.lazyLoadXT.scrollContainer = '.wrapper';

Answer 2

我也有類似的問題，但我的被加入skip_invisible固定：虛假的選項（是不存在之前）。我在這裏添加了這個答案，但我實際上是在爲其他答案投票，因爲我認爲它更徹底。