有没有办法控制网页上图像的加载顺序？我正在考虑通过首先加载轻量级的“LOADING”图形来模拟预加载器.有任何想法吗？
谢谢
解决方法
使用
javascript,并将您的图像src属性留空.
当每个图像的onload或onerror方法返回一个值时,汇编一组图像地址,并通过它进行递归,加载图像并调用递归函数.
HTML：
<img src='' id='img0' alt='[]' /> <img src='' id='img1' alt='[]' /> <img src='' id='img2' alt='[]' />
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);
你甚至可以玩一个document.getElementsByTagName(“IMG”).
顺便说一下,如果你需要加载图像,this is a good place to start.
编辑
为了避免对服务器的多个请求,您可以使用几乎相同的方法,只有在准备加载映像元素之前,才能插入图像元素.拥有< span>容器等待每个图像.然后,循环,获取span对象,并动态插入图像标签：
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
然后,当创建元素时,图像请求只会产生一次.
