Question

我有一个插件，可以在文档就绪后加载图像。

为了使其正常工作，图像源如下所示：

脚本显示 loader.gif ，直到图片被加载，然后用 the_actual_image.jpg

替换该gif

以下是我如何调用该函数：

function mylazyload() {
    $("img.lazy").show();
    var timeout = setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"})}, 800);
}

我有一个重新调整大小的函数，我在mylazyload（）之后调用它;功能：

jQuery(document).ready(function($){      
    mylazyload();
    resize_images();
});

这是重新调整大小的函数：

function resize_images() {
    var maxHeight = $(".defx img").height();
    $(".model img.lazy").each(function() {
        var $this = $(this);
        if ($this.height() > maxHeight || $this.height() < maxHeight) {
            $this.removeAttr('style').css("height","auto");
            $this.css('height', maxHeight);
        }
    });
}

问题是调整大小功能似乎适用于 loader.gif ，而不是调整 the_actual_image.jpg 。

任何想法为什么？

Answer 1

<强> 1

你的延迟加载是异步的，并且有一个超时。因此，如果你这样打电话：

lazyload();
resize();

在偶然触发lazyload之前，resize函数将会出现。

<强> 2

如果你这样做：

setTimeout(
   function() {
    $(".models img.lazy").lazyload({effect: "fadeIn"});
    resize();
   },
   800
);

我认为它可以在localhost中运行，但它不能用于生产，因为浏览器也会异步加载图像。

第3：

所以你需要的是lazyload函数中的回调。也许您使用的库具有如下实现：

$(".models img.lazy").lazyload({ effect: "fadeIn", callback: resize() });

但我不确定。你必须寻找它，如果你没有找到写自己的延迟加载或更改另一个库。

<强> 4

根据您找到的回复：

setTimeout( function() { $(".models img.lazy").lazyload({ effect: "fadeIn", load: function () { resize_images(); } }); }, 800 );

Answer 2

您的图片尚未加载到DOM Ready语句中。

尝试在超时时添加调整大小：

setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"});
resize_images();
}, 800);

尝试调整文档准备好后加载的图像时，Jquery调整大小功能不起作用

2 个答案: