您的位置：首页 > 其它

懒加载，预加载实现以及对比

2017-09-06 11:00 183 查看

一、懒加载

1.概念：

访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。

2.优点：

页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。

3.步骤：

页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

1）懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素“data-url”属性里。

2）页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-url的值取出来存放到src中。

3）在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。

4.DEMO

<style type="text/css">
img{
display: block;
}
</style>
<body>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</body>
<script type="text/javascript">
var pic=document.getElementsByTagName('img');
arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg'];
for(var i=0;i<arr.length;i++){
pic[i].setAttribute('src-data', arr[i]);
}
for(var i=0;i<4;i++){
pic[i].setAttribute('src', pic[i].getAttribute('src-data'));
}
document.onmousewheel=function(){
if(document.body.clientHeight+document.body.scrollTop>=pic[3].offsetTop+pic[3].offsetHeight){
pic[4].setAttribute('src',pic[4].getAttribute('src-data'));
}
}

</script>

5. 插件

成熟的懒加载插件，直接调用方法即可。

jquery.lazyload.js

二、预加载

1.概念：

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.优点：

图片预先加载到浏览器中，这对图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时操作得到最快的反映。

3.实现方式

实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。

4.js预加载demo:

常用方法new Image()，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小。

//要预加载的图片路径
var limg = ["image/bg1.png","image/bg2.png","image/bg3.png","image/bg4.png"];
var ind = 0;
for(var j = 0 ; j<limg.length; j++){
var img = new Image();
img.src = limg[j];
img.onload = function(){
ind++;
//加载完成
if(ind==limg.length){
//write your code...
}
}
}

三、预加载与懒加载对比

1.概念：

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓加载甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

本篇完

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航