js 实现图片懒加载

一、懒加载

懒加载也叫延迟加载，Js中图片的延迟加载，延迟图片需要符合某些条件时才加载；对于图片过多的页面，为了加快页面加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样一来页面加载性能大幅提升，提高了用户体验。手机会自动做懒加载

---

像天猫、京东网站等，页面中有着大量图片，一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术，即用户浏览到哪儿，就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力

二.实现懒加载的方法

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.如果用户在加载前就离开，自然就不会进行加载

2.第二种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片

---

使用可视区区域加载的思路:

1、网页中的图片都设为同一张图片

　 2、给图片增加data-src = "img/timg.jpg"的属性，保存图片的真实地址

　 3、当触发某些条件时，自动改变该区域的图片的src属性为真实的地址

//首先获得页面当中所有的图片
var img=document.getElementgByTaglame("img")；
//存储图片加载到的位置，避免每次都从第一张图片开始遍历
vern=0；
//页面载入完毕加载可是区域内的图片
azyload()；
//注册滚动条滚动事件
window.ongcroll = lazyload;
//监听页面滚动事件
Eunction lazyload()
//可见区域高度
var BeeHeight = document.documentElement.clientHeight;
/*滚动条距高顶部高度
docunent.body.acrol1Top: chrome
document.documentElement.scro11Top: FF */
var scrollTop = document.documentElement.acrollTop |I document,body.acrollTop;
for(var i = n; i < img.length; i++) (
/*
当前图片相对于页面顶部的距离 <=可视区域+滚动条距离距离顶部的距离*/
if (img[1].offaetTop < seeHeight + acrollTop- 800)(
// 将img[i]的src设置成img[i]的data-src
if (img [i].getAttribute("src") ==””){
ing[i].src = img[i].getAttribute ("data-src”)；
n=i+1;｝