Web性能优化之图片延迟加载

来源：微信公众号CodeL

对于一些图片多，页面长的网页来讲，若是每次打开页面加载所有的网页内容，页面加载速度势必会受到影响，若是每次打开网页只将网页可视区域的内容加载给用户 ，将大大提升网页浏览速度，同时也减轻服务器负载，咱们可使用lazyload.js来实现对图片的延迟加载，当网页图片进入到浏览器可视区域时，才会去请求服务器加载图片。
1、lazyload用法1.引用jQuery插件：

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js" ></script>

2.修改img标签将页面中的img标签src属性调整为以下例子：
<img src="1.gif" data-original="img/my.jpg" />
src属性:使用一张1px占位图片或使用64位编码图片代替(很重要，不然图片会被所有加载，更严重的是图片会被加载2次)，这里使用的1.gif图片，而实际开发中我选择了64位编码图片(下面代码表示1px的gif图片，可直接放在src属性中使用)：data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg

选择64位编码图片的缘由是加载时不会去请求服务器，普通的占位图片会请求一次服务器。
data-original：将实际要加载的图片放在data-original属性中,这里的my.jpg表明要加载的原图片

3.调用方法$("img").lazyload();
这样就完成了页面中全部图片延迟加载的功能了，默认打开页面时img只加载了占位图片，原图片只有进入浏览器可视区域以后才会被加载。

 

2、结果检测与调试

1. 经过浏览器网络流量捕获判断是否延迟加载浏览器F12打开调试工具，启用流量捕获，查看网络请求状况
2. 经过google浏览器Resources标签页能够查看到请求的资源状况，包括CSS、JS、图片等内容

 

3、lazyload属性介绍如下是列举的几个经常使用属性：

event：触发加载的事件，如scoll，click

effect：加载的动画效果，如 show, fadeIn, slideDown

threshold：灵敏度，默认为 0 进入可视区域当即加载显示；设为正数表示图片距离可视区域 x 像素时加载；设为负数表示图片距离可视区域 x 像素时加载。

属性使用方法：

$("img").lazyload({

event:"scoll",//促发事件，默认scoll

effect:"fadeIn" //加载图片使用的效果(淡入)
});

 

 

若是将lazyload延迟加载和上篇文章讲到的静态文件动态合并加载一块儿使用，网站将会获得更好的优化效果。
我在公众号CodeL发完这篇以后，有很多网友说能够再加个背景图片提示用户加载中效果，好比加个loading效果什么的，其实不用多麻烦，咱们彻底能够将1px的占位图片换成一张loading.jif图，就算图片大点，也不会产生多大影响，由于同一个图无论使用多少次，同一个页面都只会请求一次。

相关资源获取或其余疑问可在公众号留言。

若是你有优秀的原创技术类文章也能够投稿至公众号CodeL分享给你们赚取赏金哟！

原文连接：http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402793125&idx=1&sn=e687cf61592f0212446bf75ee0c2ea2d#rd

相关资源获取或其余疑问可在扫码添加CodeL公众号留言。(微信公众号: codelir)

微信扫一扫获取更多开发资源：