Question

所以我有一个页面根据用户请求动态加载图片，基本上当他们点击按钮时会弹出一个随机图像。我想找到一种方法隐藏图像，直到它完成加载，然后再次显示。我已尝试使用jQuery的$（window）.load（）函数执行此操作，它可以完美地用于第一个图像，但是当我加载下一个图像时，事件不会再次触发。有没有其他方法可以执行此操作，或重置load（）事件？感谢。

注意：有问题的图像是相当大的GIF动画，但它们非常有些，只需要花一些时间加载，有些可能需要20秒。

Answer 1

我有一个jQuery plugin called waitForImages可以帮助解决这个问题。

$('#newly-loaded-element').hide().waitForImages(function() {
    $(this).show();
});

Answer 2

使用CSS隐藏它并收听每个图像的加载事件：

<img style="display: none" class="loadedImage" src="..." />

$(function(){
    $(".loadedImage").live("load", function(){
        $(this).show();
    });
});

Answer 3

它被称为Lazy-Load，并且有一个特定的JQuery plugin。

jQuery等待动态图像加载

3 个答案: