jquery Loading图片延迟加载特效
2015-07-23 13:56
561 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片延迟加载</title> <script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/lyz.delayLoading.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("img").delayLoading({ defaultImg: "images/loading.jpg", // 预加载前显示的图片 errorImg: "", // 读取图片错误时替换图片(默认:与defaultImg一样) imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc) beforehand: 0, // 预先提前多少像素加载图片(默认:0) event: "scroll", // 触发加载图片事件(默认:scroll) duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal" container: window, // 对象加载的位置容器(默认:window) success: function (imgObj) { }, // 加载图片成功后的回调函数(默认:不执行任何操作) error: function (imgObj) { } // 加载图片失败后的回调函数(默认:不执行任何操作) }); }); </script> <style type="text/css"> .box{ width:1200px; margin:0 auto;} .box ul li { width:245px; height:245px; float:left; margin:10px; border:1px solid #e6e6e6; list-style:none; } .box ul li img{ width:100%; min-height:245px;} </style> </head> <body> <div class="box"> <ul> <li><img originalsrc="images/1.jpg" /></li> <li><img originalsrc="images/2.jpg" /></li> <li><img originalsrc="images/3.jpg" /></li> <li><img originalsrc="images/4.jpg" /></li> <li><img originalsrc="images/5.jpg" /></li> <li><img originalsrc="images/6.jpg" /></li> </ul> </div> </body>
相关文章推荐
- jQuery
- jquery tablesorter插件的使用
- jQuery Pagination Plugin
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
- 使用jquery实现仿百度自动补全特效
- 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
- 代码分析jQuery四种静态方法使用
- Div+CSS+JQuery轻松实现选项卡"选项卡"
- jQuery 标签后加提示信息
- 【jQuery】使用JQ要准备的主要淡入淡出效果
- jQuery静态方法isFunction,isArray,isWindow,isNumeric使用和源码分析
- jQuery选择器
- 实用简洁的TAB切换函数
- Jquery 获取table中的td元素的值
- jquery - 选择器 - 试题
- JS和JQuery中的事件委托 学习笔记
- 代码分析jQuery四种静态方法使用
- 使用jquery实现仿百度自动补全特效
- jquery实现简单实用的打分程序实例
- jquery实现简单的轮换出现效果实例