Javascript 使用 jQuery 延迟图像加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2897598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delay image loading with jQuery
提问by DCD
I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?
我有一个包含多个画廊的页面，包括手风琴和滑块。问题是页面需要永远加载。有没有办法将图像包装在一些代码中或对其应用类以强制它仅在加载其他所有内容后加载？
回答by jvenema
Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:
你当然可以。用“#”替换你的 img src 属性，并添加一个自定义属性，如下所示：
<img src="#" data-delayedsrc="/img/myimage.png" />
Then, add a javascript line when your page loads that does something like this:
然后，在您的页面加载时添加一个 javascript 行，执行如下操作：
$('img').each(function(){
$(this).attr('src', $(this).data('delayedsrc'));
});
回答by David Lantner
If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.
如果您正在使用 jQuery（并且我假设您是这样标记的），请查看jQuery的延迟加载插件。它会延迟加载视口外的图像，直到用户滚动到它们为止。
Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.
2015 年更新：此插件曾一度损坏，但现在又可以使用了。最后一条评论说了这么多，但我差点错过了，因为它隐藏在折叠评论中。
回答by seandebutts
An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery.data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load. The pure JS sets up a delay (3000 milliseconds in the example below), and then executes the jQuery.data(), which sets the image's src to the intended image.
延迟加载图像（和 iFrame）的一种简单方法是结合使用纯 JS、jQuery.data() 和自定义 HTML5 data-* 属性。图像的 src 最初可以指向正在加载的 GIF。data-* 属性包含您最终要加载的图像的 URL 路径。纯 JS 设置延迟（在下面的示例中为 3000 毫秒），然后执行 jQuery.data()，它将图像的 src 设置为预期图像。
The example below performs on each image with class="load-delay".
下面的示例在 class="load-delay" 的每个图像上执行。
Live Example: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
现场示例：http: //seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
CODE
代码
JS and jQuery:
JS 和 jQuery：
$(document).ready(function () {
setTimeout(function () {
$('.load-delay').each(function () {
var imagex = $(this);
var imgOriginal = imagex.data('original');
$(imagex).attr('src', imgOriginal);
});
}, 3000);
});
HTML and jQuery Library:
HTML 和 jQuery 库：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h1>Loading-Delayed Image</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
回答by Tumharyyaaden
Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with
在 HTML 中只保留一个图像，以便查看器可以开始使用，然后使用 jQuery 注入其余图像
$(document).ready(function() {
//load rest of the images
});
You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.
您还可以使用事件加载器和 AJAX 或“随时加载”，如果它是自动旋转图库或点击加载，只需构建一个简单的回调函数。
