懒加载和预加载

时间 2019-11-05

标签加载繁體版

原文原文链接

1、懒加载

1.什么是懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们以前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些状况下，它还能够帮助减小服务器负载。常适用图片不少，页面很长的电商网站场景中。html

2.为何要用懒加载

能提高用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，若是页面上全部的图片都须要加载，因为图片数目较大，等待时间很长，用户不免会心生抱怨，这就严重影响用户体验。
减小无效资源的加载，这样能明显减小了服务器的压力和流量，也可以减少浏览器的负担。
防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候须要去监听scroll事件，在scroll事件的回调中，判断咱们的懒加载的图片是否进入可视区域,若是图片在可视区内将图片的 src 属性设置为data-original 的值，这样就能够实现延迟加载。前端

4.懒加载实现步骤

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style>
      .image-item {
	    display: block;
	    margin-bottom: 50px;
	    height: 200px;//必定记得设置图片高度
	}
    </style>
</head>
<body>
<img src="" class="image-item" lazyload="true"  data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/12.png"/>
<script>
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)
</script>
</body>
</html>
复制代码

2、预加载

1.什么是预加载

资源预加载是另外一个性能优化技术，咱们可使用该技术来预先告知浏览器某些资源可能在未来会被使用到。预加载简单来讲就是将全部所需的资源提早请求加载到本地，这样后面在须要用到时就直接从缓存取资源。git

2.为何要用预加载

在网页所有加载以前，对一些主要内容进行加载，以提供给用户更好的体验，减小等待的时间。不然，若是一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展示为一片空白，直到全部内容加载完毕。github

3.实现预加载的几种办法

使用HTML标签

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>跨域

使用Image对象

<script src="./myPreload.js"></script>浏览器

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"
复制代码

使用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库

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);
}
复制代码

3、懒加载和预加载的对比

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

若是想了解更多页面性能优化的办法，请猛戳页面性能优化办法有哪些bash

4、参考文章

详解懒加载和预加载(js)服务器

懒加载和预加载