懒加载和预加载

懒加载和预加载

懒加载

• 图片进入可视区域之后加载图片资源
• 对于电商等图片很多，页面很长的业务场景适用
• 减少无效资源的加载
• 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用

相关代码

<div class='image-list'>
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
    <img src='' class='image-item' lazyload='true' data-original='真实图片地址' />
</div>

img 需要高度来占位，否则图片就是直接加载出来，不存在懒加载

.image-item{
	width:40%;
    margin-right:5%;
    display:inline-block;
    height:400px;
    background:grey;
}
.image-list{
    margin-left:5%;
}

// 页面来加载图片
var viewHeight = document.documentElement.clientHeight; //可视区域的高度

function lazyload(){
    var eles = document.querySelectorAll('img[data-original][lazyload]');
    Array.prototype.forEach.call(eles,function(item,index){
        var rect;
        if(item.dataset.original === '')
           	return 
         rect = item.getBoundingClientRect();
         // 不知道是什么的童鞋，打印一下
         
         if(rect.bottom>=0 && rect.top < viewHeight){
               !function(){
                    var img = new Image();
                    img.src = item.dataset.original;
                     img.onload = function(){
                     item.src = img.src
                    }
                     item.removeAttribute('data-original');
                     item.removeAttribute('lazyload');
                 }()
           }
    })
};
lazyload();

document.addEventListener('scroll',lazyload);// 监听页面滚动事件

预加载

• 图片等静态资源再使用之前的提前要求
• 资源使用到时候能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护

关于预加载有三种解决方案

1. img 正常加载。样式中加载 display:none;

<img src='图片地址' style='display:none'>

2. 使用 Image对象

var image = new Image();
img.src = '图片地址'

3.使用 Xmlhttprequest 对象

优点：可以更精细的控制预加载的过程
缺点：存在跨域的问题

var xmlhttprequest = new XMLHttpRequest();

xmlhttprequest.onreadystatechange = callback;

xmlhttprequest.onprogress = progressCallback;

xmlhttprequest.open('GET','图片地址',true);

xmlhttprequest.send();

function callback(){
    if(xmlhttprequest.readState ==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')
     }
}

4.preload.js 控制预加载的库 (也存在跨域问题)

preload.js API

// 使用 preload.js

var queue = new createjs.LoadQueue(false); //false 解决跨域问题

queue.on('complete',handleComplete,this);

   queue.loadManifest([
       {id:'myImage',src:'图片地址'},
       {id:'myImage2',src:'图片地址'},
   ]);

   function handleComplete(){
       var image = queue.getResult('myImage');
       document.body.appendChild(image);
   }