我正在寻找一个支持延迟加载图像的 JQuery 插件。 Lazy Load JQuery plugin 不再受支持，并且在 Firefox 中不起作用。
有人知道支持大多数现代浏览器的好选择吗？
我也愿意接受其他方法。我有一个隐藏的 div，其中包含我不想加载的图像，除非使 div 可见。让我知道在这种情况下是否有更好的方法来延迟图像加载。
【问题讨论】：
loading 属性和 img 标签的 lazy 值和 iframe 标签：developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
标签： javascript jquery image lazy-loading
我在标签样式页面中遇到了类似的情况，最初不可见的标签中的内容被不必要地下载。我采用的解决方案是创建如下标记：
<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');
});
这样就实现了只在tab被选中时才加载图片的目的，并且是有效的html5！
【讨论】：
我遇到了一个问题，它在 FF 中也不起作用，但是当我用图像填写初始 src 属性值时，我得到了它，就像 Tuupola 在这个示例页面上所做的那样，他使用 1px x占位符的 1px 灰色 gif 图像：
http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html
在 FF 中启动它，它会起作用的。
【讨论】：
我知道开发人员说它不起作用，但我现在在一个项目中使用 LazyLoad，它在 FF 中运行良好（我使用的是 Firefox 4）。下载和设置大约需要 24 秒，所以试试看它是否适合你 :)
【讨论】：
我很确定 Javascript 有点矫枉过正而且有点倒退（特别是如果使用脚本上没有 defer="" 属性的 jQuery），因为解析和执行 javascript 确实需要时间。相反，使用 decoding attribute 设置为 async 像这样。
<img src="/path/to/file.jpg" decoding="async"></img>
另外，我假设您想要延迟加载图像的最可能原因是让您的网站加载更快。如果是这种情况，那么您可以通过将图像转换为 jpeg 并使用 compressor.io/JPEGmini 压缩它们来使您的网站加载速度更快（将您的 jpeg 文件上传到两者并使用之后结果更小的压缩）。
接下来，虽然还没有对所有浏览器提供全面支持，但越来越多的浏览器开始支持它。我更喜欢采取实用的方法，让我的网站充满快速的新功能，并在我的网站通过更多支持的浏览器更快地增长时退居二线，而不是花费大量时间让我的网站在旧的过时浏览器上快速加载只是为了满足我真正应该更频繁地更新浏览器的一小部分用户。
【讨论】：
有一个很好的轻量级 jquery 插件——imgr。在这里查看https://github.com/agaase/imgr。
它具有以下主要特点 -
【讨论】：
找到这个解决方案here
<h1>List of 10 alberts</h1>
<div class="albert_container"></div>
<div class="loading_albert" style="display:none;"><span>Loading ....</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var req = '';
$(window).scroll(function () {
console.log(req);
if (req === 'sent') {
return false;
}
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
req = 'sent';
showLoader();
setTimeout(function () {
fetchAlberts();
}, 1000);
}
});
function fetchAlberts() {
var html = '';
$.get("/ByKishor/data.php").done(function (response) {
var data = JSON.parse(response);
for (var i in data) {
html += "<div class='albert_child'><b>" + i + "</b> : " + data[i].name + "</div>";
}
$(".albert_container").append(html);
req = '';
hideLoader();
});
}
function showLoader() {
$(".loading_albert").show();
}
function hideLoader() {
$(".loading_albert").hide();
}
fetchAlberts();
});
</script>
【讨论】：
我刚刚创建了一个示例，使用jQuery.Lazy，以另一种方式解决这个问题，然后看到这些问题有点老了。 ;)
不过没关系，现在我想向您展示我的解决方案，即使是其他可能想做类似事情的人。
这个例子在第一个视图上看起来很大，但它主要是创建示例结构。最有趣的一行是插件上的.update() 调用。
lazy.update();
标签更改后，我们强制插件通过这一行更新视图。其他一切都是自动管理的。很简单。
可以在下面找到工作示例。如果你喜欢玩它，我也创建了一个jsFiddle。
// create a lazy instance
var lazy = $("img").lazy({
chainable: false,
visibleOnly: true,
appendScroll: $("#content div"),
// below config is just for demo purpose
threshold: 0,
afterLoad: function(e) {
var image = e.attr("src").match(/tab\+(.*)\: image (\d)/g)[0];
console.log(image.replace("+", " ").replace("%20", " "));
}
});
// your tab controller
$("#header li").click(function() {
$("#content div").hide().eq($(this).index()).show();
// update lazy instance after tab change manually
lazy.update();
});html * {
margin: 0;
padding: 0;
}
ul#header {
list-style: none;
margin: 10px 10px 0;
}
ul#header li {
display: inline-block;
background: #000;
color: #fff;
padding: 4px 10px;
margin-right: 10px;
}
ul#header li:hover {
cursor: pointer;
color: #f00;
}
div#content div {
display: none;
width: 520px;
height: 350px;
overflow: auto;
background: #ccc;
padding: 10px;
border: 1px solid #000;
margin-left: 10px;
}
div#content div img {
width: 500px;
height: 200px;
margin-bottom: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul id="header">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="content">
<div style="display: block;">
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 1" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 2" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 3" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 4" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 5" />
</div>
<div>
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 1" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 2" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 3" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 4" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 5" />
</div>
<div>
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 1" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 2" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 3" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 4" />
<img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 5" />
</div>
</div>【讨论】：
<img src="#" data-src="/img/foo.png"/>
.........................................................................
$('img[data-src]').each(function() {
$(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
});
【讨论】：