当试图调整文档准备就绪后加载的图像大小时，Jquery resize函数不起作用

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

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

lazyload();
resize();

脚本显示loader.gif，直到加载图像，然后用实际图像.jpg替换该gif

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

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

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);
        }
    });
}

我在mylazyload（）之后调用了一个重新调整大小的函数；功能：

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

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);
        }
    });
}

以下是重新调整大小功能：

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

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);
        }
    });
}

函数resize_images（）{
var maxHeight=$（“.defx img”）.height（）；
$（“.model img.lazy”）.each（function（）{
var$this=$（this）；
如果（$this.height（）>maxHeight | |$this.height（）

问题是调整大小功能似乎在加载程序.gif上工作，而不是调整实际图像.jpg的大小

---

知道为什么吗？

您的图像尚未加载到DOM就绪语句中

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

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

1:

您的延迟加载是异步的，并且有一个超时。因此，如果您这样称呼：

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
);

---

有什么好主意吗？太多了是这样吗？是的，但我是这样一个新手：）不知道如何修改我的函数以使其工作：console.log（$（this））；//这是什么？我很确定我现在不能在我的resize函数中使用jqery，但是我不太确定为什么你有那个timeout函数。我很确定你不需要它。我有一个正在加载的gif，图像是从外部URL加载的，我注意到这个网站使用它工作得更好。