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

Question

我有一个插件，可以在文档准备好后加载图像。

为了让它工作，图像源看起来像这样：

脚本显示loader.gif直到加载图像，然后将该gif替换为_actual_image.jpg

以下是我如何调用函数：

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

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

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上工作，而不是调整_actual_image.jpg的大小。

有什么想法吗？

Answer 1

1:

你的惰性加载是异步的，并且有一个超时。因此，如果你这样调用：

lazyload();
resize();

调整大小功能甚至会在lazylod被触发之前发生。

2:

如果你这样做：

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

我认为它可以在localhost中工作，但在生产中不起作用，因为浏览器加载图像也是异步的。

3:

因此，您需要的是lazylod函数中的回调。也许你使用的库实现了它，比如：

$(".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);