图片的懒加载和预加

一，懒加载：

1>内容：

延迟加载图片或符合某些条件时才加载某些图片

2>意义：

懒加载的主要是减少请求数或延迟请求数，优化性能。

3>实现方式：

1.第一种是延迟加载，使用setTimeOut或setInterval进行加载延迟。

2.第二种是条件加载，符合某些条件或触发了某些事件才开始异步下载。

3.第三种是可视区加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间

基本步骤

1)给网页中的图片都设置为同一张图片（src指向一个小图片或为空）

2)给图片新增data-src(可以自定义命名)的属性，保存图片真实地址

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

<img src="default.jpg" data-src="地址" />

    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可视区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }

二，预加载：

1>内容：

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

2>意义：

牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映

3>现实场景

在开发过程中，我们会遇到当鼠标hover上去的时候要更改菜单的背景，如果没有进行图片预加载会出现闪烁，出现闪烁是因为当hover的时候，图片才去加载

4>实现方式：

1.实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。

2.常用的是new Image()，设置其src来实现预载，再使用onload方法回调预载完成事件。（代理模式）

var myImage=(function(){
	var imgNode=document.createElement('img');
	document.body.appendChild(imgNode);
	return {
		setSrc:function(src){
			imgNode.src=src;
		}
	}
})();
//代理函数
var proxyImage=(function(){
	var img=new Image();
	img.onload=function(){
		myImage.setSrc(this.src);
	}
	return {
	 setSrc:function(src){
                 myImage.setSrc("img/11.png");//在加载图片未加载完成时用的图片
                 img.src=src;
		}
	}
})();
proxyImage.setSrc("img/222.png");

3.只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。

4.当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

三．两种技术的本质：

两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。