懒惰加载图片

Question

我正在寻找一个支持延迟加载图像的JQuery插件.该延迟加载jQuery插件 不再支持和Firefox中不起作用.

有没有人知道支持大多数现代浏览器的好选择？

我也对其他方法持开放态度.我有一个隐藏的div与图像,我不想加载,除非div是可见的.让我知道在这种情况下是否有更好的方法来延迟图像负载.

Answer 1

我在选项卡样式页面中遇到类似情况,其中最初不可见选项卡中的内容不必要地下载.我使用的解决方案是创建标记,如:

<img src="#" data-src="/img/foo.png"/>

然后在处理选项卡转换的javascript中,我还将"data-src"属性替换为这些图像的"src"属性.

$thisTab.find('img[data-src]').each(function(img) {
    var $img = $(img);
    $img.attr('src', $img.attr('data-src'))
        .removeAttr('data-src');
});

这实现了仅在选择选项卡时加载图像的目标,并且是有效的html5!