jQuery图片延迟加载插件:jquery.lazyload
2023-09-14 09:02:29 时间
class='lazy' 载入样式,data-original指向图片地址
底部引入jQuery和jQuery.lazyload.js
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"> <img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"> <img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"> <img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"> <img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"> <img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); }); </script>
底部调用lazyload()方法进行初始化,设置显示方法,当然还可以设置更多参数。
----------------------------------------------------------------------------
LazyLoad官方下载地址:http://www.appelsiini.net/projects/lazyload
jQuery插件库网站推荐:http://www.jq22.com
Refer:还有人用jquery.lazyload吗
相关文章
- jQuery旋转插件jqueryrotate,制作转盘
- jQuery网页背景灯光闪烁特效
- JQuery使用总结
- 使用jQuery操作DOM元素
- jQuery源码分析-each函数
- jQuery插件开发的五种形态[转]
- jquery改造轮播图1
- jQuery补充,基于jQuery的bxslider轮播器插件
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
- 教你开发jQuery插件(转)
- jQuery插件定义
- 前端-jQuery-选择标签-选择器和筛选器
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
- jquery editable plugin--点击编辑文字插件
- jQuery 网格布局插件
- 图片延迟加载并等比缩放,一个简单的JQuery插件
- JQuery模板插件-jquery.tmpl
- jquery 文件上传插件Uploadify 初探
- atitit.jquery tmpl模板总结 .doc
- jQuery UI 实例 - 旋转器(Spinner)
- jQuery UI 实例 - 滑块(Slider)
- jQuery UI 使用
- jQuery必知要点(一)
- 基于特定值来推断隐藏显示元素的jQuery插件
- jQuery回到顶部插件jQuery GoUp
- js-jquery-SweetAlert2【二】配置与方法
- js-jquery-SweetAlert【二】配置方法
- jquery 插件 起步代码
- jQuery Fancybox插件说明
- python web py入门(45)- jQuery 事件 - preventDefault()方法
- 扩展jquery插件的方式
- jQuery扩展插件以及正则相关函数练习