首页 > Java基础 > Web性能优化之图片延迟加载
2018
03-05

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

对于一些图片多,页面长的网页来说,如果每次打开页面加载全部的网页内容,页面加载速度势必会受到影响,如果每次打开网页只将网页可视区域的内容加载给用户 ,将大大提高网页浏览速度,同时也减轻服务器负载,我们可以使用lazyload.js来实现对图片的延迟加载,当网页图片进入到浏览器可视区域时,才会去请求服务器加载图片。
一、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只加载了占位图片,原图片只有进入浏览器可视区域之后才会被加载。

 

二、结果检测与调试

  1. 通过浏览器网络流量捕获判断是否延迟加载浏览器F12打开调试工具,启用流量捕获,查看网络请求情况

  2. 通过google浏览器Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等内容

 

三、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图,就算图片大点,也不会产生多大影响,因为同一个图不管使用多少次,同一个页面都只会请求一次。


本文》有 0 条评论

留下一个回复