24

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

谢谢

4

4 回答 4

22

使用 Javascript,src稍后填充图像属性。告诉浏览器链接到页面上的#URL,因此不会向服务器发送请求。(如果src属性为空,仍然会向服务器发出请求 - 不太好。)

组装一个图像地址数组,并通过它进行递归,加载图像并在每个图像的onloadoronerror方法返回一个值时调用递归函数。

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").

顺便说一句,如果您需要加载图像,这是一个很好的起点

编辑

为了避免对服务器的多个请求,您可以使用几乎相同的方法,只是在您准备好加载它们之前不要插入图像元素。有一个<span>容器等待每个图像。然后,循环遍历,获取 span 对象,动态插入图片标签:

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

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

于 2010-11-18T03:53:10.303 回答
5

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

<img src=" data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= "data-src="your-image-here">

避免 <img src="">

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

于 2015-09-14T01:54:38.723 回答
4

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

于 2010-11-18T04:15:20.547 回答
3

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

于 2013-04-17T12:32:12.643 回答