如何控制HTML中的图像加载顺序?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (31)

有没有办法控制网页上的图像加载顺序?我想通过首先加载一个轻量级的“LOADING”图形来模拟预加载器。有任何想法吗?

提问于
用户回答回答于

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

用户回答回答于

使用javascript,并将图片src属性留空。

组装一个图像地址数组,并通过它缓存,加载图像并在每个图像的onloador 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")

扫码关注云+社区