深入分析懒加载、预加载

懒加载的原理（延迟加载）

1.图片进入可视区域之后再去请求图片资源，不要请求无效资源。
2.适用于电商等图片很多，页面很长的业务场景。
3.减少无效资源的加载。
4.并发加载的资源过多会阻塞JS的加载，影响网站的正常使用（浏览器有并发请求上限），图片在JS的上面。
5.SRC属性设置之后会请求SRC资源，后面的SRC先不设置，换成占位符。
6.监听滚轮事件，当进入相关图片的可视区域之后，才会去动态设置图片的src属性。
7.电商产品应用广泛。

预加载原理（提前加载）

1.图片等静态资源在使用之前的提前请求。
2.资源使用到时能从缓存中加载，不去网络请求，提升用户体验。
3.页面展示的依赖关系维护。比如当前页面会依赖音乐图片等，这样预加载之后页面渲染不会阻塞。
4.九宫格抽奖。频繁切换选中和非选中状态，要保障样式的展示。
5.动画展示。资源加载完了之后再去页面加载。

懒加载的方法

先将img标签中的src链接设为同一张图片(空白图片)，将其真正的图片地址存储再img标签的自定义属性中(比如data-img)。

当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

<li class="item">
    <a href="javascript:void(0)"><img data-img="${p.pic}" src="img/blank.jpg"></a>
</li>

//封装懒加载函数
var lazyLoad = (function(){
//匿名函数自调，避免全局污染
    function init(){
        $(window).on("scroll", function(){
        //监听窗口滚动事件
            var clock = setTimeout(function(){
            //启动定时器，加载图片
                $(".item img").each(function(){
                //遍历每张图片
                    var $cur = $(this);
                    if(checkShow($cur))
                    //调用检查函数，如果元素在可视范围内
                        $cur.attr('src', $cur.attr('data-img'));
                        //显示图片
                });
            },300);
            if(clock) clearTimeout(clock);
            //停止定时器
        });
    };

    //检查元素是否在可视范围内
    function checkShow($node){
        var scrollH = $(window).scrollTop(),
        //获取窗口滚动高度
        winH = $(window).height(),
        //获取窗口高度
        top = $node.offset().top;
        //获取图片距离窗口顶部偏移高度
        if(top < winH + scrollH)
            return true;
        else
            return false;
    };

    //返回init函数
    return{
        load:init;
    };
})();

//调用懒加载函数,首屏要手动调动
lazyLoad.load();

Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery
注意点:
Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery
jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的；
官网下载的zepto,就已经包含了官网所述的默认模块了
github上下载的zepto模块需要自己导入

与图片一样，视频同样可以延迟加载，来达到性能优化的目的。

正常情况下加载视频，都是使用标签，那么对于一些需要用户自己播放的视频，最好指定标签的preload属性为none，这样浏览器就不会预加载任何视频数据。
为了占用空间，我们用poster属性为其占位

<video controls preload="none" poster="占位图">
	<source src="视频资源同名.webm" type="video/webm">
	<source src="视频资源名.mp4" type="video/mp4">
</video>

实现预加载的几种办法

使用HTML标签

使用Image对象

使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

   var xmlhttprequest=new XMLHttpRequest();
    xmlhttprequest.onreadystatechange=callback;
    xmlhttprequest.onprogress=progressCallback;
    xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
    xmlhttprequest.send();
    function callback(){
      if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
      }else{
         console.log("Request was unsuccessful:"+xmlhttprequest.status);
      }
    }
    function progressCallback(e){
    e=e || event;
    if(e.lengthComputable){
    console.log("Received"+e.loaded+"of"+e.total+"bytes")
    }
    }
    

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。

    //使用preload.js
    var queue=new createjs.LoadQueue();//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
    queue.on("complete",handleComplete,this);
    queue.loadManifest([
    {id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
    {id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
    ]);
    function handleComplete(){
      var image=queue.getResuLt("myImage");//队列存放资源
      document.body.appendChild(image);
    }

两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。