懒加载
认识
懒加载是一种按需延迟资源的方式。在加载显示页面时,并不一次性加载所有该页面所需要的图像,对于在可视区域之外的图像,可以等到用户scroll到该区域的时候,再进行加载
实现方式
1、目前已经有很多库实现了懒加载,例如lazysizes,可以考虑使用
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标签
<img src="./img/1.jpeg" style="display:none">
//并不非常推荐的做法,因为虽然看不见元素,但是该元素的http请求,依然会在页面加载和渲染的过程中发出,反而加长了首屏显示时间
- Image元素
使用Image元素,同使用html标签原理是相同的,不多是js实现
//demo.js
var img = new Image(); img.src = "./img/1.jpeg"<!-- src可以是相对路径或者绝对路径,还可以跨域。当然跨域就存在一定的安全性问题-->将脚本加入到页面中(js位置很重要,最好放在“</body>”之前‘’;或者放在head中,但是使用defer属性延迟脚本的执行)
<script src="demo.js"></script> - XMLHttpRequest
- PreLoadJS库