一,懒加载:
1>内容:
延迟加载图片或符合某些条件时才加载某些图片
2>意义:
懒加载的主要是减少请求数或延迟请求数,优化性能。
3>实现方式:
1.第一种是延迟加载,使用setTimeOut或setInterval进行加载延迟。
2.第二种是条件加载,符合某些条件或触发了某些事件才开始异步下载。
3.第三种是可视区加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上,不会有太长时间
基本步骤
1)给网页中的图片都设置为同一张图片(src指向一个小图片或为空)
2)给图片新增data-src(可以自定义命名)的属性,保存图片真实地址
3)当触发某些条件时,自动改变该区域的图片的src属性为真实的地址
<img src="default.jpg" data-src="地址" />
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可视区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
二,预加载:
1>内容:
提前加载图片,当用户需要查看时可直接从本地缓存中渲染
2>意义:
牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映
3>现实场景
在开发过程中,我们会遇到当鼠标hover上去的时候要更改菜单的背景,如果没有进行图片预加载会出现闪烁,出现闪烁是因为当hover的时候,图片才去加载
4>实现方式:
1.实现预载的方法非常多,可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
2.常用的是new Image(),设置其src来实现预载,再使用onload方法回调预载完成事件。(代理模式)
var myImage=(function(){
var imgNode=document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc:function(src){
imgNode.src=src;
}
}
})();
//代理函数
var proxyImage=(function(){
var img=new Image();
img.onload=function(){
myImage.setSrc(this.src);
}
return {
setSrc:function(src){
myImage.setSrc("img/11.png");//在加载图片未加载完成时用的图片
img.src=src;
}
}
})();
proxyImage.setSrc("img/222.png");
3.只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
4.当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
三.两种技术的本质:
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。