经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery图片延迟加载
来源:cnblogs  作者:dreams7433  时间:2019/4/2 8:55:32  对本文有异议

一、HTML代码如下:

  1. <div class="box">
  2. <ul>
  3. <li><img originalsrc="images/1.jpg" /></li>
  4. <li><img originalsrc="images/2.jpg" /></li>
  5. <li><img originalsrc="images/3.jpg" /></li>
  6. <li><img originalsrc="images/4.jpg" /></li>
  7. <li><img originalsrc="images5.jpg" /></li>
  8. <li><img originalsrc="images/6.jpg" /></li>
  9. <li><img originalsrc="images/7.jpg" /></li>
  10. <li><img originalsrc="images/8.jpg" /></li>
  11. <li><img originalsrc="images/9.jpg" /></li>
  12. <li><img originalsrc="images10.jpg" /></li>
  13. </ul>
  14. </div>

二、jQuery代码如下:

  1. <script src="js/jquery-1.6.js" type="text/javascript"></script>
  2. <script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. $(function () {
  5. $("img").delayLoading({
  6. defaultImg: "images/loading.jpg", // 预加载前显示的图片
  7. errorImg: "", // 读取图片错误时替换图片(默认:与defaultImg一样)
  8. imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc)
  9. beforehand: 0, // 预先提前多少像素加载图片(默认:0)
  10. event: "scroll", // 触发加载图片事件(默认:scroll)
  11. duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
  12. container: window, // 对象加载的位置容器(默认:window)
  13. success: function (imgObj) { }, // 加载图片成功后的回调函数(默认:不执行任何操作)
  14. error: function (imgObj) { } // 加载图片失败后的回调函数(默认:不执行任何操作)
  15. });
  16. });
  17. </script>

 

原文链接:http://www.cnblogs.com/phperlinxinlan/p/10638023.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号