懒加载和预加载
懒加载
- 图片进入可视区域之后加载图片资源
- 对于电商等图片很多,页面很长的业务场景适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞 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);// 监听页面滚动事件
预加载
- 图片等静态资源再使用之前的提前要求
- 资源使用到时候能从缓存中加载,提升用户体验
- 页面展示的依赖关系维护
关于预加载有三种解决方案
- img 正常加载。样式中加载 display:none;
<img src='图片地址' style='display:none'>
- 使用 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
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);
}