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

当一个网页中含有大量图片时，如果一开始就将图片全部加载完毕，势必会引起性能和效率上的问题，用户可能会由于等待时间过久而离开。

这个时候，我们需要利用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力。

一、延迟加载图片

基本思路如下:
给需要延迟加载的图片设置自定义属性比如lazy-src，存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组，在window.onscroll的时候判断该数组内容是否出现在了用户视线中，如果出现了，就将自定义属性内容赋予图片的src属性。

下面我们来具体谈谈实现步骤。
首先，我们需要定义函数返回浏览器的可视区域位置：

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

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

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

当然，这里只是讲思路，如果用到工程上，还是有很多缺陷，比如性能和兼容性等。所以推荐一款jquery插件：lazyload

1、判断css加载完成

这里顺便说一下如何判断一个web页面的css文件加载完成。我们知道css通过外部文件引入，其实是一个link节点。所以我们只需要通过轮询来判断该link节点的sheet属性或者sheet.cssRules属性，就可以判断该css文件是否完全加载成功。

2、判断图片加载完成

同样的，img标签有一个complete属性，我们只需要通过轮询来查看该属性即可。

3、判断javascript加载完成

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