什么是懒加载

懒加载，即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候，如果在进入页面的时候一次性把所有图片加载完，需要很长的时间。为了提升用户体验，我们使用懒加载，当图片出现在浏览器可视区域时，才加载图片。例如各种电商页面。

懒加载的作用

加快页面打开速度，提升用户体验
减少服务器压力和浏览器的负担

简单的实现

1、我们先来看看一次性加载20张图片，要用多少时间。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Lazyload</title><style>img {display: block;height: 200px;}</style></head><body><img src="./5.1.png"><img src="./7.1.png"><img src="./8.1.png"><img src="./10.1.png"><img src="./10.2.png"><img src="./10.3.png"><img src="./10.4.png"><img src="./12.1.png"><img src="./12.2.png"><img src="./12.3.png"><img src="./12.4.png"><img src="./12.5.png"><img src="./12.6.png"><img src="./12.7.png"><img src="./12.8.png"><img src="./12.9.png"><img src="./12.10.png"><img src="./12.11.png"><img src="./12.12.png"><img src="./12.13.png"><script></script></body>
</html>

我们把图片资源全部写在img的src里。这时候则一次性加载了全部。所用时间220ms。

2、我们再来看加载20个一样的图片，要用多少时间。

// 把上面代码的img替换成：<img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png"><img src="./loading.png">

我们可以看到，虽然这张图片展示了20次，但是由于都是同一个资源，所有浏览器只请求了一次。用时85ms。

3、经过上面的实验，我们可以理解一下懒加载的原理。就是只加载页面上你看得到的图片。你还没滚动到的图片不加载，都用loading图片这一张图片代替。那么实际上我们进入页面的时候，只加载了一张loading图片和浏览器可视区域的n张图片。

<img src="./loading.png" data-src="./5.1.png">
<img src="./loading.png" data-src="./7.1.png">
<img src="./loading.png" data-src="./8.1.png">
<img src="./loading.png" data-src="./10.1.png">
<img src="./loading.png" data-src="./10.2.png">
<img src="./loading.png" data-src="./10.3.png">
<img src="./loading.png" data-src="./10.4.png">
<img src="./loading.png" data-src="./12.1.png">
<img src="./loading.png" data-src="./12.2.png">
<img src="./loading.png" data-src="./12.3.png">
<img src="./loading.png" data-src="./12.4.png">
<img src="./loading.png" data-src="./12.5.png">
<img src="./loading.png" data-src="./12.6.png">
<img src="./loading.png" data-src="./12.7.png">
<img src="./loading.png" data-src="./12.8.png">
<img src="./loading.png" data-src="./12.9.png">
<img src="./loading.png" data-src="./12.10.png">
<img src="./loading.png" data-src="./12.11.png">
<img src="./loading.png" data-src="./12.12.png">
<img src="./loading.png" data-src="./12.13.png"><script>function lazyload(){var imagesList = document.getElementsByTagName('img');  // 获取所有图片列表var length = imagesList.length; // 一共有多少张图片var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数return function(){var clientHeight = document.documentElement.clientHeight;  // 浏览器可视区域的高度var scrollTop = document.documentElement.scrollTop;  // 页面被遮挡的高度for(var i = n;i<length;i++){if(imagesList[i].offsetTop<clientHeight+scrollTop){ // offsetTop获取图片顶部相对于页面顶部的距离，当它小于浏览器可视区域的高度和页面被遮挡的高度之和时，加载图片if(imagesList[i].getAttribute('src')==='./loading.png'){ //当该img的路径为'./loading.png'时才把图片的真实路径赋值给srcimagesList[i].src = imagesList[i].getAttribute('data-src');}n = n + 1;}else{break;}}}}var a = lazyload();a();window.addEventListener('scroll', a, false); // 监听页面滚动事件，执行lazyload函数。
</script>

我们通过计算浏览器的高度clientHeight和页面的被遮挡的高度scrollTop的和，再计算图片的顶部与该页面顶部的距离offsetTop，最后比较它们的大小。使还未出现在页面中的图片不加载，来实现懒加载。看看效果，我们的可视区域只有3张图片，一共加载的图片资源为1张loading图片和3张可视区域的图片，共用时90ms。相对于不使用懒加载，一次性加载20张图片的220ms，节省了用户的130ms的等待时间。在图片量多的网站中，效果更为明显。

参考资料：
延迟加载(Lazyload)三种实现方式

未来

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg
Chromium 官方支持的 image 懒加载将在 Chrome 75 发布，也就是说，将来只需要使用<img loading="lazy"> 就可以指定某个图片只在滚动到附近的时候加载。

超简单直观理解懒加载（Lazyload）相关推荐

一个简单的图片懒加载
一个简单的图片懒加载所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段.其选择的重要的部分先加载,次要的部分需要的时候再加载.比如一个电商网站,首屏通常有很多的数据,清晰度较高的 b ...
JS里面的懒加载(lazyload)
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占 ...
图片懒加载 lazyload
目录了解代码效果了解图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
图片懒加载(lazyload)的几种方式
背景当页面中有很多图片时,全部加载需要很多时间,而且会消耗很多渲染资源,为了解决这个问题,加强用户体验,我们先将看得到的区域中的图片加载,也就是可视化区域加载,剩余部分等之后再加载. 原理 ...
IOS中的懒加载lazyLoad
今天在使用tableview的时候,遇到了Tableview最后一行无法显示或者显示不全的问题. 在控制器RootViewController中声明了一个UITableView类属性.其中RootVi ...
超详细的图片预加载和懒加载教程
最近接手一个项目 . 结果光安装依赖都出现了一堆麻烦 . 好不容易处理完一个 , 又来一个 .头疼啊看到之前有一些预加载的学习笔记.于是又查查找找 ,想想写写把预加载和懒加载的笔记写完整发现制 ...
懒加载--初步理解. by:王朋
懒加载(LazyLoad),又称为延迟加载. 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动 ...
Vue-Router + Webpack 路由懒加载实现
一.前言 https://segmentfault.com/a/1190000015904599 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分 ...

超简单直观理解懒加载（Lazyload）

懒加载

什么是懒加载

懒加载的作用

简单的实现

未来

超简单直观理解懒加载（Lazyload）相关推荐

最新文章

热门文章