效果展示 源码下载
用到的加载中的图片:
代码如下:
<!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>