jquery加载动态图延迟

偶然进入拉手网,看到一些大图在没有加载显示出来之前都是显示正在加载的GIF动态图。这个人性化挺好,查找了代码了解了

网页代码中:

  1. // 设置背景图为加载的动画图  
  2. <style>.dynload{background:url(http://s2.lashouimg.com/static/pics/www/n_img/ttt3.gif) no-repeat center center;}</style>  
  3. //设置imgsrc为图片的地址。src加载一个小白图片  
  4. <a href="*l" target="_blank"><img width="250px" height="250px" src="http://d1.lashouimg.com/static/images/n_img/a.gif" imgsrc="http://s2.lashouimg.com/zt/201201/04/132565146249858800.jpg" alt="仅售48元!原价128元的三亚奇幻艺术体验馆门票一张!" class="dynload" title="仅售48元!原价128元的三亚奇幻艺术体验馆门票一张!"/></a>  
  5. 真正的图片地址是imgsrc   


  1. // 最终的效果是利用jquery 设置的。查找了拉手页面的js 文件找到  
  2. jQuery(function() {  
  3.   function b() {  
  4.     d.each(function() {  
  5.       typeof $(this).attr("imgsrc") != "undefined" && $(this).offset().top < $(document).scrollTop() + $(window).height() && $(this).attr("src", $(this).attr("imgsrc")).removeAttr("imgsrc")  
  6.     })  
  7.   }  
  8.   var d = $(".dynload");  
  9.   $(window).scroll(function() {  
  10.     b()  
  11.   });  
  12.   b()  
  13. });  
  14.   
  15. //重要的是这行代码:$(this).attr("src", $(this).attr("imgsrc")).removeAttr("imgsrc")
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值