在使用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脚本加载图像：

   $(window).trigger('scroll');
   

2. 使用另一个正常工作的延迟加载脚本（例如jQuery LazyLoadXT）。

   - 如果使用此插件，请确保包含插件 和 以通过将“水平滚动溢出容器”传递给lazyLoadXT来初始化水平滚动功能

   - （例如，项目“.wrapper”的容器）如下：$.lazyLoadXT.scrollContainer = '.wrapper';

Answer 2

我有一个类似的问题，但我的修复是通过向选项添加skip_invisible：false（之前没有）。我在这里添加了这个答案，虽然我实际上正在为另一个答案投票，因为我觉得它更彻底。