直到使用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固定：虚假的选项（是不存在之前）。我在这里添加了这个答案，但我实际上是在为其他答案投票，因为我认为它更彻底。