0

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

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

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

这是我调用该函数的方式：

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

我有一个 re-size 函数，我在 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的大小。

任何想法为什么？

4

2 回答 2

1

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
);
于 2012-09-05T22:02:01.607 回答
-1

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

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

setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"});
resize_images();
}, 800);
于 2012-09-05T22:01:22.837 回答