jQuery图片延迟加载
程序员文章站
2023-01-13 12:42:21
一、HTML代码如下: 二、jQuery代码如下: ......
一、html代码如下:
<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="images5.jpg" /></li> <li><img originalsrc="images/6.jpg" /></li> <li><img originalsrc="images/7.jpg" /></li> <li><img originalsrc="images/8.jpg" /></li> <li><img originalsrc="images/9.jpg" /></li> <li><img originalsrc="images10.jpg" /></li> </ul> </div>
二、jquery代码如下:
<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>
推荐阅读
-
网站加载速度过慢,主若是图片上加载过慢
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
Android 9.0 网络请求适配,加载网络图片用Glide框架网络权限配置配好了,还是加载不出来图片
-
JQuery EasyUI 加载两次url的原因分析及解决方案_jquery
-
一个简单的动态加载js和css的jquery代码_jquery
-
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery
-
分享几个超级震憾的图片特效_jquery
-
css实现图片未加载完成时占位显示实例分享
-
jQuery结合ajax实现动态加载文本内容_jquery
-
滚动图片效果 jquery实现回旋滚动效果_jquery