懒加载

认识

懒加载是一种按需延迟资源的方式。在加载显示页面时，并不一次性加载所有该页面所需要的图像，对于在可视区域之外的图像，可以等到用户scroll到该区域的时候，再进行加载

实现方式

1、目前已经有很多库实现了懒加载，例如，可以考虑使用

2、使用库这样的操作，相当于增加一个需要请求的js文件，增加一次http请求。所以如果能够实现原生的懒加载，能够更好的优化性能；

原生js实现图片懒加载

原理：

页面上图片的src属性设置为空字符串；（也可以设置为一个占位位图）

将真实路径存放在data-original属性中；（以data-开头的html5属性，original可以自定义）

监听scroll事件，scroll回调函数中判断懒加载图片位置是否进入可视区域。如果是，则将data-original属性值赋值给src属性

代码

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)

预加载

预加载，提前告诉浏览器将会用到的资源（例如图片），提前加载缓存起来。需要的时候，直接从缓存中获得图片等资源

http请求并没有减少，而是在页面加载渲染的过程中，在网络不繁忙的时机发出请求。

实现方法：

HTML方式

css方式
```
no-repeat -9999px -9999px;} 
```
/* 以上代码可以作为内联样式直接加入到html文件中，浏览器在加载渲染页面过程中，遇到就会直接发出请求，
-9999px -9999px 可以将图片隐藏起来，作用与html方式中的display:none相同*/
/*同样没有减少http请求，并且运行在页面渲染过程中，首屏显示时间依然会增加*/

Image元素
使用Image元素，同使用html标签原理是相同的，不多是js实现
```
//demo.js var img = new Image();img.src = "./img/1.jpeg"
```

将脚本加入到页面中（js位置很重要，最好放在“</body>”之前‘’；或者放在head中，但是使用defer属性延迟脚本的执行）
<script src="demo.js"></script>

以上三种方法的优化---运行时机的选择

使用js代码生成img元素，style样式，以及Image元素。然后选择在window.onload时运行。

window.onload事件是在页面所有资源都加载完毕之后才运行的，不会影响到首屏时间

window.οnlοad=function(){                        var img = document.createElement('img');                img.setAttribute('src','./img/1.jpeg');            img.setAttribute('style','display:block');            // 添加元素到body中，位于之前，            document.body.appendChild(img);        }

XMLHttpRequest

使用ajax发出请求，可以精确的控制图片的下载过程，可以在请求成功之后回调运行其他需要操作。比如调整图片的大小等等

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库

总结

懒加载与预加载，一个是延迟图片的加载，一个是提前加载图片并缓存起来。

懒加载，减少了http请求。预加载并没有减少请求。

懒加载非常直接明确的提升了性能。预加载相当于提前做牺牲为后来者做了性能优化，选择预加载的执行时机就显得非常重要。

转载于:https://www.cnblogs.com/Jamie1032797633/p/10804819.html

你可能感兴趣的文章