前端性能优化:实现图片延迟加载之lazyload.js插件

HTML5 herman 1365浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在这个不差钱的世界,讲性能优化是件很“多余”的事情。我们老板经常说的一句话是,开宝马的会在乎油钱吗?一台设备不行,就上两台。我当场泪奔,为什么我的工资不翻倍,你在乎这点钱吗?
很多人说这样的技巧纯属多余,但是作为程序员我们不能无所谓,如果能通过技术去将速度提高数倍乃至数十倍,这才能提现我们的价值。
回答今天的话题,作为前端工程师,我们如何进行性能优化呢?作为已经努力过的,和正在努力的,我分享下我图片延迟加载方面的经验。
lazyload.js插件的使用依赖jQuery。具体使用方式如下:

<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.lazyload.js" ></script>
<script>
    $(function() {
        $("img").lazyload({
            effect : "fadeIn"
        });
    });
</script>
<div class="lazy" data-original="img/example.jpg" width="640" height="480"></div>

这样,只有当这个div出现在可视视窗内时,背景图才会加载显示。
lazyload参数使用说明
placeholder:"img/grey.gif",用图片提前占位.值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 
effect : "fadeIn", 载入使用何种效果。值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 
threshold : 200,提前开始加载。值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 
event : "click",事件触发时才加载。值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 
container: $("#container"),对某容器中的图片实现效果。值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 
failurelimit : 10,图片排序混乱时。值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
结束语总结:
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量。或者提前加载数据,提供体验。图片延迟加载有一个更大的好处是,爬虫爬取时无法爬取到图片,节省了服务器资源。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 前端性能优化:实现图片延迟加载之lazyload.js插件