控制 HTML 中的图像加载顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4211519/
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
Controlling image load order in HTML
提问by Yarin
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
有没有办法控制网页上图像的加载顺序？我想通过首先加载轻量级的“加载”图形来尝试模拟预加载器。有任何想法吗？
Thanks
谢谢
回答by Ben
Use javascript, and leave your image srcproperties empty.
使用 javascript，并将图像src属性留空。
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onloador onerrormethod for each image returns a value.
组合图像地址数组，并通过它递归，加载图像并在每个图像的onloadoronerror方法返回值时调用递归函数。
HTML:
HTML：
<img src='' id='img0' alt='[]' />
<img src='' id='img1' alt='[]' />
<img src='' id='img2' alt='[]' />
JS:
JS：
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
你甚至可以玩弄一个document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
顺便说一句，如果您需要加载图像，这是一个很好的起点。
EDIT
编辑
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span>container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
为了避免对服务器的多个请求，您可以使用几乎相同的方法，只是在您准备好加载它们之前不要插入图像元素。有一个<span>容器等待每个图像。然后，循环遍历，获取span对象，动态插入图片标签：
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
然后在创建元素时只发出一次图像请求。
回答by SuperDuck
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
只需在任何其他图像之前包含“正在加载”图像。通常它们包含在页面的最顶部，然后当页面加载完成时，它们会被 JS 隐藏。
回答by tiomno
I think this article https://varvy.com/pagespeed/defer-images.htmlgives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
我认为这篇文章https://varvy.com/pagespeed/defer-images.html提供了一个非常好的和简单的解决方案。请注意解释如何使用以下内容创建“空” <img> 标签的部分：
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
<img src=" data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
避免 <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
要显示加载图像，只需将其放入 HTML 中，然后在适当的时刻/事件中对其进行更改。
回答by AlexK
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder
这是一个为您执行此操作的小型 jQuery 插件：https: //github.com/AlexandreKilian/imageorder
