图片懒加载和图片预加载

之前做活动页面的时候由于商品图片过多，使用了懒加载的技术来提高页面的加载速度，现在和预加载一起总结一下。

1.定义：

图片懒加载（延迟加载）：当访问一个页面的时候，先把img元素或者其他元素的背景图片路径替换成一张大小为1*1px图片的路径（只需请求一次的占位图），当图片出现在浏览器的可是区域内时，才设置图片真正的路径，让图片显示。

图片预加载：在浏览器空闲的时候提前加载图片放入缓存，当用户需要查看的时候直接从本地缓存中读取图片进行渲染。

2.懒加载和预加载的区别：

两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载会增加服务器前端压力。懒加载的主要目的是作为服务器前端的优化，减少请求数或者延迟请求数；预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使得用户的操作得到最快的反应。

3.实现方式：

懒加载的实现方式：对img标签增加一个自定义属性data-url存放真正的图片路径；页面加载完成后，使用滚动监听函数根据scrollTop判断图片是否在用户视野之内，如果在的话将data-url的值取出来放入src属性中

预加载的实现方式：

（1）使用css和javascript实现

（2）仅适用javascrpt实现

（3）使用ajax实现

这里重点讲一下预加载的后两种实现方式。

（2）仅用javascript实现预加载（两种方法）

var images=new Array();
function preload(){
    for(var i=0;i<preload.arguments.length;i++){
        images[i]=new Image();
        images[i].src=preload.arguments[i];
    }
}
preload(src1,src2,src3)

function preloader(){
    if(document.images){
        var img1=new Image();
        var img2=new Image();
        var img1=new Image();
        img1.src="";
        img2.src="";
        img3.src="";

    }
}
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload !='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            if(oldonload){
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

（2）使用ajax实现预加载

使用ajax实现预加载不仅可以预加载图片，还可以预加载css,js相关的东西。

window.onload=function(){
    setTimeout(function(){
        var xhr=new XMLHttpRequest();
        xhr.open('GET','preload.js');
        xhr.send();
        xhr=new XMLHttpRequest();
        xhr.open('GET','preload.css');
        xhr.send();
        new Image().src="preload.png";
    },1000)
}