javascript图片延迟加载实现方法及思路

本文实例为大家介绍了如何通过javascript来延迟加载图片，分享给大家供大家参考，具体内容如下
当一个网页中含有大量图片时，如果一开始就将图片全部加载完毕，势必会引起性能和效率上的问题，用户可能会由于等待时间过久而离开。
这个时候，我们需要利用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力。
一、延迟加载图片
基本思路如下:
给需要延迟加载的图片设置自定义属性比如lazy-src，存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组，在window.onscroll的时候判断该数组内容是否出现在了用户视线中，如果出现了，就将自定义属性内容赋予图片的src属性。
下面我们来具体谈谈实现步骤。
首先，我们需要定义函数返回浏览器的可视区域位置：

/** * @description: 返回浏览器的可视区域位置 * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度 */ function getClient（）{var l,t,w,h;l = document.documentElement.scrollLeft||document.body.scrollLeft;t = document.documentElement.scrollTop||document.body.scrollTop;w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;return {left:l,top:t,width:w,height:h}; }

然后定义函数返回待加载资源的位置：

/** * @description: 返回待加载资源位置 * @params: p:需要加载的资源节点 * @return: left:左边距离，top：上边距离，width：宽度，height：高度 */ function getSubClient（p）{var l = 0, t = 0, w, h;w = p.offsetWidth;h = p.offsetHeight;while（p.offsetParent）{l += p.offsetLeft;t += p.offsetTop;p = p.offsetParent;} return {left:l,top:t,width:w,height:h}; }

接下来定义函数，判断两个矩形区域是否相交：

/** * @decription: 判断两个矩阵是否相交，返回一个布尔值 * @params: rec1,rec2:需要比较的节点矩阵 * @return: true： 两矩阵相交 */ function contains（rec1,rec2）{var lc1,lc2,tc1,tc2,w1,h1;lc1 = rec1.left + rec1.width/2;lc2 = rec2.left + rec2.width/2;tc1 = rec1.top + rec1.height/2;tc2 = rec2.top + rec2.height/2;w1 = （rec1.width + rec2.width）/2;h1 = （rec1.height + rec2.height）/2;return Math.abs（lc1 - lc2）<w1&&Math.abs（tc1 - tc2）<h1; }

最后对图片资源进行监视，如果进入用户视野则加载资源：

 /** * @description: 资源出现在视野中再加载.将资源放入一个数组。 */ var arr = document.getElementsByClassName（"divX"）; window.onscroll = function（）{var prec1 = getClient（）;var prec2;for（var i = arr.length-1;i>=0;i--）{if（arr[i]）{prec2 = getSubClient（arr[i]）;if（contains（prec1,prec2））{//加载资源console.log（arr[i].id）;arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute（"lazy_src"）;delete arr[i];}}} }

当然，这里只是讲思路，如果用到工程上，还是有很多缺陷，比如性能和兼容性等。所以推荐一款jquery插件：lazyload
1、判断css加载完成
这里顺便说一下如何判断一个web页面的css文件加载完成。我们知道css通过外部文件引入，其实是一个link节点。所以我们只需要通过轮询来判断该link节点的sheet属性或者sheet.cssRules属性，就可以判断该css文件是否完全加载成功。
2、判断图片加载完成
同样的，img标签有一个complete属性，我们只需要通过轮询来查看该属性即可。

 function imgLoad（img, callback） {var timer = setInterval（function（） {if （img.complete） {callback（img）clearInterval（timer）}}, 50）}imgLoad（img1, function（） {p1.innerHTML（"加载完毕"）}）

3、判断javascript加载完成
那么如何判断javascript加载完成呢？script节点的onload方法就是加载完成后执行的。ie6和ie7则可通过readyState来判断：

function include_js（file） {var _doc = document.getElementsByTagName（"head"）[0];var js = document.createElement（"script"）;js.setAttribute（"type", "text/javascript"）;js.setAttribute（"src", file）;_doc.appendChild（js）;if （！/*@cc_on！@*/0） { //if not IE//Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onloadjs.onload = function （） {alert（"Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload"）;}} else {//IE6、IE7 support js.onreadystatechangejs.onreadystatechange = function （） {if （js.readyState == "loaded" || js.readyState == "complete"） {alert（"IE6、IE7 support js.onreadystatechange"）;}}}return false;}

以上就是本文的全部内容，希望对大家的学习有所帮助。