源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery.lazyload 实现图片延迟加载jquery插件

  • 时间:2020-03-22 11:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery.lazyload 实现图片延迟加载jquery插件
[b]什么是ImageLazyLoad技术[/b] 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 [b]怎么实现ImageLazyLoad[/b] 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: 1.导入JS插件 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> 2.在你的页面中加入如下的javascript: $("img").lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1.改变threshold $(“img”).lazyload({ threshold : 200 }); 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。 2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
[url=http://www.appelsiini.net/projects/lazyload]http://www.appelsiini.net/projects/lazyload[/url] LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致;
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部