控制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对象，并动态插入image标记：

var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...

然后，只在创建元素时发出一次图像请求。

Answer 2

我认为这篇文章https://varvy.com/pagespeed/defer-images.html提供了一个非常好和简单的解决方案。请注意解释如何使用以下命令创建“空”标记的部分：

为了避免

要显示加载图像，只需将其放入HTML中，然后在适当的时刻/事件更改它。

Answer 3

只需在任何其他图像之前包含“加载”图像即可。它们通常包含在页面的最顶部，然后当页面加载完成时，它们会被JS隐藏。