如何在html页面中设置图像加载顺序? [英] how to set image loading order in html page's ?

问题描述

如何在html页面中设置图像加载顺序?

how to set image loading order in html page''s ?

推荐答案

使用javascript，并将图像src属性保留为空.

组装图像地址数组，然后递归遍历，在每个图像的onload或onerror方法返回值时，加载图像并调用递归函数.

HTML:

Use javascript, and leave your image src properties empty.

Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.

HTML:

<img src="" id="img0" alt="[]" />
<img src="" id="img1" alt="[]" />
<img src="" id="img2" alt="[]" />

JavaScript:

JavaScript:

var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
var counter = 0;

function loadImage(counter) {
  //Break out if no more images
  if(counter==imgAddress.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++); }

  //Change source (then wait for event)
  I.src = imgAddresses[counter];
}

您甚至可以玩document.getElementsByTagName("IMG").

如果您需要加载图像:从此处开始 [ ^ ]

You could even play around with a document.getElementsByTagName("IMG").

if you need a loading image: Start from here[^]

这篇关于如何在html页面中设置图像加载顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！