图片懒加载和图片预加载

以前作活动页面的时候因为商品图片过多，使用了懒加载的技术来提升页面的加载速度，如今和预加载一块儿总结一下。

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)
}