Question

我正在使用大量图片创建门户网站。为了平滑，我将延迟加载插件添加到此门户

这是插件http://www.appelsiini.net/projects/lazyload

我使用此代码初始化插件：

$(function () {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});

图片网址是这样的：

<a href="#">
    <img src="/public/images/dflt_03.jpg" data-original="<?php echo $this->magImg;?><?php echo $top['img_path'];?>" width="180" height="230" alt="cover" class="lazy">
</a>

这完美无缺。但我的问题是，在加载页面后，没有用于显示的图像。鼠标滚动发生后，这将显示图像。我想在滚动之前显示一些图像。

Answer 1

您的html页面没有提供标记，但由于延迟加载的概念是图像仅在需要时加载，即它们出现在视口中时，可能会触发窗口或正文上的>滚动或调整大小事件应该有效。在页面加载后尝试任何这些（或者，更好的是，当延迟加载完整的回调被调用时）：

$("html, body").trigger("scroll");
$(window).trigger("resize");

Answer 2

请参阅修正提案here

我检查了插件并在更新方法中更改了这一行：

if (settings.skip_invisible && $this.css('display') === 'none') {
//if (settings.skip_invisible && !$this.is(":visible")) {

jquery延迟加载插件

2 个答案: