javascript - 直到使用 Lazy Load 插件滚动时图像才会显示

Question

我正在开发一个 phonegap 应用程序，我正在使用延迟加载插件 ( http://www.appelsiini.net/projects/lazyload )。

我遇到的问题是直到用户滚动时图像才会显示。我有一个演示 here .如果您单击 CauseComprehensiveSchoolGallery，您会看到图像在您滚动之前不会变得可见。我看过这个 SO 问题 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. 手动触发“scroll”事件强制 lazyload 脚本加载图片:

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

2. 使用另一个可以正常工作的延迟加载脚本(例如 jQuery LazyLoadXT)。

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

   --(例如，项目“.wrapper”的容器)像这样:$.lazyLoadXT.scrollContainer = '.wrapper';