html - 控制 HTML 中的图像加载顺序

Question

有没有办法控制网页上图片的加载顺序？我正在考虑通过首先加载轻量级“加载”图形来尝试模拟预加载器。有什么想法吗？

谢谢

Answer 1

使用 Javascript，并填充图像 src属性稍后。 #告诉浏览器链接到页面上的 URL，因此不会向服务器发送请求。 (如果 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 = ...

然后在创建元素时只进行一次图像请求。