Question

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

由于

Answer 1

使用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 = ...

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

Answer 2

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

Answer 3

我认为这篇文章https://varvy.com/pagespeed/defer-images.html提供了一个非常好的简单解决方案。请注意说明如何创建＆＃34;空＆＃34; ＆LT; IMG＆GT;标签：

＆lt; img src =＆＃34; data：image / png; base64，R0lGODlhAQABAAD / ACwAAAAAAQABAAACADs = ＆＃34;数据-SRC =＆＃34;你的图像 - 在这里＆＃34;＆GT;

要避免＆lt; img src =＆＃34;＆＃34;＆gt;

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

Answer 4

这是一个小型jQuery插件，可以为您执行此操作：https://github.com/AlexandreKilian/imageorder

控制HTML中的图像加载顺序

4 个答案: