前端网络资源优化之图片"懒加载"

在前端开发中永远有用不完的框架，学不完的优化。今天就给大家分享一下关于”网络资源加载的优化问题“。

如果你还不清楚什么是懒加载，那请关注我下一篇关于预加载的文章分享

场景：         日常生活中最常用的就是电商类网站，我们使用某宝、阿猫、狗东购物时，会有很多的图片展示。按照javascript的渲染引擎正常逻辑是，首先加载网页的1、html（架构）2、css（样式表现）3、javascript（交互），按照这个逻辑，渲染引擎会把所有的html中的img（图片）加载完成后，再显示完成的网页。  但是，如果像电商类的网站等加载完成，用户得花多少流量费啊，并且打开一个这样的网页，我也要等个十分八分钟吧。就想买个鼠标，却把电脑、电器、洗衣机全给我加载出来了，明天我房子就归中移动了。

一、主题：前端网络资源优化之  "图片懒加载"

 

二、描述：

有的图片色彩更饱满但体积也更大。如果你的网站还有很高的加载延迟，可以试试blurry image或是懒加载。

懒加载能够让图片按需加载。如果一个画廊有1000张图片，那么这些图片并不需要一开始就被下载好。我们可以先加载前十张图片，然后在用户想要查看时再加载剩下的。

关于懒加载的第三方库实在是太多了。

Blurry是现在FaceBook使用的技术。当你在网速较低的情况下点开某人的个人主页，网页中展示的图片会从模糊逐渐变得清晰。

 

三、实现效果：

                        我们的滚动条滚动到哪里就加载到哪里，浏览不到的东西不加载

（现在这个语言表达能力真是服了自己，就是在浏览器看不到的内容我就先不加载，等我浏览到了你再给我加载）

 

当刷新页面时图片过多时，有些图片加载比较慢，当我们持续滚动滚动条，下方的图片逐渐加载出来。

那么，如何去解决这个问题呢？？？

四、实现方法

1、img标签的变化

<img src="" class="img" lazyload="true" data-original="../img/2.jpg" />

①先给img的src地址为空

②lazyload="true"

③ data-original="../img/2.jpg"  添加一个data属性， 这个路径才是图片加载的真实路径

④当浏览窗口发生滚动时，js会被调用把data-original的图片路径赋给src

2、添加js方法

① 把下面代码复制到你的<script>.......</script>标签中

②调用javascript函数

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)

具体的每个属性的作用，已在注释中显示，不明白的欢迎在评论区交流。

Github：https://github.com/chaojiaheng

E-mail：chaojiaheng@gmail.com

转载于:https://my.oschina.net/chaojiaheng/blog/1795474