javascript - 延迟加载图片

标签 javascript jquery image lazy-loading

<分区>

我正在寻找一个支持延迟加载图像的 JQuery 插件。 Lazy Load JQuery plugin不再受支持并且在 Firefox 中不起作用。

有谁知道支持大多数现代浏览器的好替代品吗?

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

最佳答案

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

<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!

关于javascript - 延迟加载图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5582739/

相关文章:

Android Listview 图片大小

javascript - 阴影不显示谷歌地图标记

javascript - 我可以让 javascript 在我的网页中搜索字符串并删除它所属的范围吗?

javascript - 打开一个子列表时滑动子列表

javascript - 循环动画不起作用

Jquery 平滑滚动偏移

javascript - 有什么方法可以防止 Safari 边缘滑动(例如在 iPhone 上)?

javascript - 如何动态创建文本框而无需页面加载onclick

java - file.delete() 不彻底删除遗留的图像空白图像文件

ios - 如何像 MHFacebookImageViewer 一样显示 Gif 动画图像进行图像预览?