控制HTML中的图像加载顺序

概述有没有办法控制网页上图像的加载顺序？我正在考虑通过首先加载轻量级的“LOADING”图形来模拟预加载器.有任何想法吗？ 谢谢 使用 javascript,并将您的图像src属性留空. 当每个图像的onload或onerror方法返回一个值时,汇编一组图像地址,并通过它进行递归,加载图像并调用递归函数. HTML： <img src='' id='img0' alt='[]' /><img src 有没有办法控制网页上图像的加载顺序？我正在考虑通过首先加载轻量级的“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 = ...

然后,当创建元素时,图像请求只会产生一次.

总结

以上是内存溢出为你收集整理的控制HTML中的图像加载顺序全部内容，希望文章能够帮你解决控制HTML中的图像加载顺序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。