网页延迟加载大图片，提升显示速度两法

网页中的大图片通常影响显示速度，从而影响用户体验，所以需要把大图片延迟加载，如果大图片比较多，还需要用滚屏加载，以节省服务器资源。图片不多又是必须显示的图片延迟一点加载就可以提高用户体验。

延迟加载图片应该如何实现？这需要 Javascript 来完成，网页加载完成后或者再过几秒，执行一段 Javascript 代码把图片加载即可。下面就看这段延迟加载图片的 Javascript 代码应该怎么写，共有两种方法。

Javascript 实现网页延迟加载大图片，提升显示速度

方法一：把图片赋给指定元素

网页加载完成后，把待加载的大图片赋给要显示图片的元素，代码如下：

html代码：

<div id="divImages"></div>

Javascript代码：

function loadImagesAfter() {
    var imgDiv = document.getElementById("divImages");
    imgDiv.innerHTML = "<img src='/images/loadimg.jpg' />";
  }
  setTimeout("loadImagesAfter()", 3000);

以上代码是网页加载完成后再过3秒加载图片，需要把这段代码放到网页的后面，才是网页加载完三秒后加载图片；如果Javascript 代码放在 js 文件，需要在网页的后面引用。

方法二：先加载空白小图片再加载大图片

这种方法需要先加载一张空白小图片，但利于搜索引擎蜘蛛抓取，代码如下：

html代码：

<div id="divImages">
    <img tsrc="大图片1地址" src="空白小图片地址" />
    <img tsrc="大图片2地址" src="空白小图片地址" />
  </div>

Javascript代码：

function loadImagesAfter() {
    var imgDiv = document.getElementById("divImages");
    var images = imgDiv.getElementsByTagName("img");

  for (var i = 0; i < images.length; i++) {
      images[i].setAttribute("src", images[i].getAttribute("tsrc"));
    }
  }
  setTimeout("loadImagesAfter()", 3000);

以上代码也要放到网页后面才是网页加载完后执行，如果代码是放在 js 文件中的，也需要在网页后引用。