懒惰加载图片 [英] Lazy loading images

问题描述

我正在寻找一个支持延迟加载图片的JQuery插件。不再支持 Lazy Load JQuery插件，但在Firefox中无效。

I'm looking for a JQuery plugin that supports lazy loading images. The Lazy Load JQuery plugin is no longer supported and does not work in Firefox.

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

Does anyone know a good alternative that supports most modern browsers?

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

I'm also open to other approaches. I have a hidden div with images that I don't want to load unless the div is made visible. Let me know if there are better approaches to deferring the image load in this situation.

推荐答案

我在标签中遇到了类似的情况样式页面，其中最初不可见标签中的内容不必要地下载。我使用的解决方案是创建标记，如：

I encountered a similar situation in a tab style page where the content in initially invisible tabs was downloading unnecessarily. The solution I went with was to create markup like:

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

然后在处理标签转换的javascript中我还将data-src属性替换为这些图像的src属性。

and then in the javascript that handles the tab transitions I also substituted the "data-src" attribute into the "src" attribute of those images.

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

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

This accomplishes the goal of only loading the images when the tab is selected, and is valid html5!

这篇关于懒惰加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！