来源:微信公众号CodeL

对于一些图片多,页面长的网页来说,如果每次打开页面加载全部的网页内容,页面加载速度势必会受到影响,如果每次打开网页只将网页可视区域的内容加载给用户 ,将大大提高网页浏览速度,同时也减轻服务器负载,我们可以使用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图,就算图片大点,也不会产生多大影响,因为同一个图不管使用多少次,同一个页面都只会请求一次。

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

如果你有优秀的原创技术类文章也可以投稿至公众号CodeL分享给大家赚取赏金哟!

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

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

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

Web性能优化之图片延迟加载的更多相关文章

  1. Web 性能优化: 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  2. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  3. Web性能优化之图片优化

    http://get.jobdeer.com/6513.get 其中APNG和WebP格式出现的较晚,尚未被Web标准所采纳,只有在特定平台或浏览器环境可以预知的情况下加以采用,虽然均可以在不支持的环 ...

  4. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  5. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  6. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

  7. Web性能优化:雅虎35条

    对web性能优化,一直知道是个很重要的方面,平时有注意到,但是对于雅虎35条是第一次听说,查了一下,发现平时都有用过,只是没有总结到一块,今天就总结一下吧. 雅虎35条: 1.[内容]尽量减少HTTP ...

  8. 关于WEB 性能优化 (摘抄)

    压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...

  9. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

随机推荐

  1. 不可或缺 Windows Native (4) - C 语言: 预处理命令,输入,输出

    [源码下载] 不可或缺 Windows Native (4) - C 语言: 预处理命令,输入,输出 作者:webabcd 介绍不可或缺 Windows Native 之 C 语言 预处理命令 输入 ...

  2. 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式

    [源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...

  3. javascript: jquery.gomap-1.3.3.js

    from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...

  4. cURL POST command line on WINDOWS RESTful service

    26down votefavorite 7 My problem: Running windows 7 and using the executable command line tool to cu ...

  5. 彻底卸载JDK的-并只依赖配置环境安装JDK(不依赖注册表)-解决Error opening registry key'software\Javasoft\Java Runti问题

    一.备份安装好的绿色版JDK a.重新安装JDK到任意目录,假设这个目录是C:\java.b.将装好的JDK,JRE拷贝到任意一个其他目录,如D:\bak,这样做的目的主要是为了备份JDK.(建议打成 ...

  6. PHP学习笔记:等比例缩放图片

    直接上代码,imgzip($src,$newwid,$newhei)这个函数带进去的分别是原图片.缩放要求的宽度.缩放的长度.代码都备注了,不懂可以留言哈哈 <?php //压缩图片 缩略图 $ ...

  7. html与js的取值,赋值

    -------------------------------------------------- ------------------------------------------------- ...

  8. CRM 2013 系统设置新功能一:界面自动保存 及 SDK 中 Xrm.Page.data.entity.save

    CRM 2013 界面会自动保存了..在系统设置中默认“是”,如果不需要可以调整. CRM实体记录在新建时会有出现“保存”按钮,非新建状态下,没有“保存”按钮只有“新建”按钮,系统将会自动为你保存最后 ...

  9. 深入底层逆向分析TDC‘s keygenme(手脱压缩壳)

    系统 : Windows xp 程序 : TDC‘s keygenme 程序下载地址 :http://pan.baidu.com/s/1gdWyt6z 要求 : 脱壳 & 注册机编写 使用工具 ...

  10. Enforcing the correct protocol for partially SSL secured SharePoint sites

    Enforcing the correct protocol for partially SSL secured SharePoint sites http://www.sharepointconfi ...