偶然进入拉手网,看到一些大图在没有加载显示出来之前都是显示正在加载的GIF动态图。这个人性化挺好,查找了代码了解了
网页代码中:
网页代码中:
- // 设置背景图为加载的动画图
- <style>.dynload{background:url(http://s2.lashouimg.com/static/pics/www/n_img/ttt3.gif) no-repeat center center;}</style>
- //设置imgsrc为图片的地址。src加载一个小白图片
- <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>
- 真正的图片地址是imgsrc
- // 最终的效果是利用jquery 设置的。查找了拉手页面的js 文件找到
- jQuery(function() {
- function b() {
- d.each(function() {
- typeof $(this).attr("imgsrc") != "undefined" && $(this).offset().top < $(document).scrollTop() + $(window).height() && $(this).attr("src", $(this).attr("imgsrc")).removeAttr("imgsrc")
- })
- }
- var d = $(".dynload");
- $(window).scroll(function() {
- b()
- });
- b()
- });
- //重要的是这行代码:$(this).attr("src", $(this).attr("imgsrc")).removeAttr("imgsrc")