jquery-懒加载技术(简称lazyload)

第一:lazyLoad简介及作用:

网站性能优化的插件,提高用户体验。

页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

第二:使用场合

 涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件 等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久。

第三:代码使用

1.导入JS插件(前提有 1.6.2.js文件)

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

2.在你的页面中加入如下:

<script type="text/javascript"> 
    $("img").lazyload();  
</script> 

所以图片都延迟加载。

3.设置敏感度区域

插件提供了 threshold 选项

$("#xd").lazyload({ threshold : 200 })

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4. 还有涉及到 高级应用,触发事件,多参数等等。详细见参考 url

参考:

加载 图片 :http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

加载 js 文件:

转载于:https://www.cnblogs.com/iqian/p/5098744.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值