有没有办法控制网页上图像的加载顺序?我正在考虑尝试通过首先加载轻量级“加载”图形来模拟预加载器。有任何想法吗?
Thanks
使用 Javascript,并填充图像src
属性稍后。这#
告诉浏览器链接到页面上的 URL,因此不会向服务器发送请求。 (如果src
属性为空,仍然向服务器发出请求 - 不太好。)
组装图像地址数组,并递归遍历它,加载图像并在onload
or 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")
.
顺便说一句,如果您需要加载图像,这是一个很好的起点 http://ajaxload.info/.
EDIT
为了避免向服务器发出多个请求,您可以使用几乎相同的方法,只是在准备好加载图像元素之前不要插入它们。有一个<span>
等待每个图像的容器。然后,循环遍历,获取span对象,动态插入图片标签:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
然后,当创建元素时,仅发出一次图像请求。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)