jQuery实现鼠标滚动图片延迟加载效果附源码下载

这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量，减轻服务器负担。
请用鼠标或者键盘方向键使页面向下滚动，注意图片的变化。本特效没有使用专门的图片延迟加载插件，只需要一小段jQuery代码就实现了图片延迟加载，使用非常方便。在本文后面附有源码下载。

效果展示源码下载
用到的加载中的图片：
代码如下：

<！DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" /><meta name="description" content="何问起"><meta name="keywords" content="何问起"><link href="" rel="stylesheet"><style type="text/css">* {margin: 0;padding: 0;border: 0;}.hovertreebox {padding-top: 800px;}.img_hovertreebox {float: left;width: 33%;text-align: center;margin-bottom: 100px;}.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue;}</style><script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript">$（function（）{$（window）.scroll（function（event） {var ah=$（window）.scrollTop（）;var ch=$（window）.height（）$（".img_hovertreebox"）.each（function（）{var bh=$（this）.offset（）.top;if（ch+ah-200>bh）{var a=$（this）.find（"img"）.attr（"load_src"）;$（this）.find（"img"）.attr（"src",a）;}}）}）;}）</script></head><body><div class="hovertreeinfo"><h1>jQuery鼠标滚动页面图片延迟加载</h1>请向下滚动页面。注意图片的变化。<a href="http://hovertree.com">何问起</a><a href="http://hovertree.com/menu/texiao/">网页特效</a><a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代码说明</a></div><div class="hovertreebox"><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img4.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png"></div><div class="img_hovertreebox"><img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png"></div></div></body></html>

以上所述是小编给大家介绍的jQuery实现图片延迟加载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！