在讲图片的惰性加载前,我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等,还有个好听的英文名字叫做 "lazyload"。需要注意的是,惰性加载并不只是图片的专利,Javascript 中函数也有惰性加载的概念,而在 Javascript 异步加载中还有个 LazyLoad类库,而图片的惰性加载库(lazyload)与之完全是两个概念,这些一定要弄清楚,以免混淆概念。
图片的惰性加载是啥意思?为什么要用它?当我们页面上的东西越来越丰富的时候,我们发现页面的加载速度却越来越慢,而图片的加载量无疑是 HTTP 请求里面的大头。其实很多时候,你把整个页面加载完,用户却不会滑动到最下面,也就是说很多东西其实白白加载了。因为图片的加载是大头,所以我们先拿图片开刀,我们假设,如果试图加载一个 html 页面,图片先不加载,当用户将页面往下滑动,图片该出现在可视区域时,再将该图片加载,这样就能将一开始打开页面的 HTTP 请求量降低,这就是图片的惰性加载。
图片的惰性加载实现方式其实很简单。
接着我们来简单写下代码。
首先,按照第一步将真实的图片地址藏在 data-original 属性中。这里我假设所有图片都要进行惰性加载,现实开发中如果肯定是在第一屏的图片,它的 src 完全可以直接指向真实的地址。
<ul>
<li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>
因为我把所有图片都设置为惰性加载模式,而首屏的图片需要直接显示,这里我写了个 init() 函数,注释都在代码中了:
function init() {
var images = document.images;
// 加载首屏图片
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
// 如果在可视区域并且还没被加载过
if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
// 先调用 HTML5 方法
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
} else { // 假设图片标签在 HTML 中的顺序和实际页面中顺序一致
break;
}
}
}
代码中写了个 imageLoaded() 函数来将真实的图片地址指向元素,如果直接将 data-original 属性值指向图片的 src 属性的话,看到的图片可能会一段一段出现,而先将图片完全加载,然后再赋值使图片出现的话,体验就好多了。
function imageLoaded(obj, src) {
var img = new Image();
img.onload = function() {
obj.src = src;
};
img.src = src;
}
OK,接着我们监听 scroll 事件。当用户滑动页面,图片出现在可视区域时,随即加载图片。
window.onscroll = function() {
lazyload();
};
function lazyload() {
var lazy = 0;
var images = document.images;
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
}
}
}
有的时候并不能当图片刚好在可视区域的时候再去加载,而要稍微 "预加载",可以调整下 lazyload() 函数中的 lazy 参数。
如果 "生硬" 地显示图片体验不大好,也可以搞点淡出效果,具体就不说了,可以看完整代码 Github:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
ul {
margin: 0 auto;
padding: 0;
width: 300px;
list-style: none;
}
.lazy {
margin-bottom: 100px;
width: 300px;
height: 168px;
text-align: center;
line-height: 168px; /*垂直居中*/
}
</style>
<body>
<ul>
<li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
<li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>
<script>
init();
function init() {
var images = document.images;
// 加载首屏图片
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
// 如果在可视区域并且还没被加载过
if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
// 先调用 HTML5 方法
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
} else {
break;
}
}
}
window.onscroll = function() {
lazyload();
};
function lazyload() {
var lazy = 500;
var images = document.images;
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
obj.style.cssText = "transition: ''; opacity: 0;"
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
}
if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
obj.isShow = true;
obj.style.cssText = "transition: 1s; opacity: 1;"
}
}
}
function imageLoaded(obj, src) {
var img = new Image();
img.onload = function() {
obj.src = src;
};
img.src = src;
}
</script>
</body>
</html>
这样,一个简单的图片惰性加载 DEMO 就完成了!
PS:惰性加载虽然好处多多,但是也有一个 "非致命" 的缺点,影响 seo。因为图片都被替换成假的图片,所以会影响图片的收录,所以这功能不建议在详情页使用
地址:https://github.com/lessfish/lessfish.github.io/tree/master/2015/picture-lazyload
优势:性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。节约带宽:这个不需要解释。
到此,实现图片懒加载主要有两种方法: 监听 scroll 事件,通过 getBoundingClientRect() 计算目标元素与视口的交叉状态;IntersectionObserver 接口。
什么叫懒加载?就是只有在访问的时候才会进行请求加载,这可以有效提升网站打开的速度,加上这行,就可以做到懒加载↓===括号里的路径改成组件的路径,然后就不需要在上面import了
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化
在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现
在autoload机制引入前,要引用其他文件中的函数和类需使用include/require把文件加载。随着SPL库中的autoload机制以及命名空间的完善,现代化PHP开发鲜少见到以include/require的方式加载类
在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西
Future对象表示异步操作的结果,我们通常通过then()来处理返回的结果;async用于标明函数是一个异步函数,其返回值类型是Future对象;await用来等待耗时操作的返回结果,这个操作会阻塞到后面的代码
需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。页面加载完成时先调用一下,首屏内的图片。代码简单,却很通用,很实用。方便扩展
用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!