注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

php asp 高端网站开发 微信网站开发 视频会议软硬件

 
 
 

日志

 
 

jquery lazyload插件代码实现页面图片延迟加载  

2017-02-12 20:32:19|  分类: html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

借助 jquery lazyload插件可以轻松实现延迟加载,调用方式如下:

引入jquery和jquery lazyload插件:

 代码如下复制代码

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

图片标签处理:

<img data-original="img/example.jpg" width="640" height="480">
<!--
<img data-original="图片路径" width="640" height="480">
即把img标签src属性改为data-original
-->

在页面加载完成后调用:

 代码如下复制代码

<script>
 $(function() {
  $("img").lazyload();
  //加上淡出效果
  //$("img").lazyload({ effect : "fadeIn" });
 });
</script>

核心代码定法在于下面这句data-original

 代码如下复制代码

<img data-original="img/example.jpg" width="640" height="480">

这样写浏览器是不会自动解析data-original上面的图片了,这个我们lazyload插件在我们移动到可视区之后我们lazyload就会自动把data-original图片给img src了哦,如

<img src="图片路径" width="640" height="480">
即把img标签src属性改为data-original

而在jquery这段代码

 代码如下复制代码

<script>
 $(function() {
  $("img").lazyload();
  //加上淡出效果
  //$("img").lazyload({ effect : "fadeIn" });
 });
</script>

$("img").lazyload(); 这句就是告诉我们加载当前界面所有图片标签了,当然我们也可以指定是那个div的标签哦,后面一句//$("img").lazyload({ effect : "fadeIn" });就是一个效果哦

这个我经过测试是完美的延迟加载功能了,可以节省不少带宽哦,有一个10WIP的站使用此功能之后会发现流量更多少了。

  评论这张
 
阅读(295)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017