你的位置:首页 > Java教程

[Java教程]jQuery图片延迟加载


这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。

效果展示 http://hovertree.com/texiao/jqimg/7/


请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效没有使用专门的图片延迟加载插件,只需要一小段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>

源码下载:http://hovertree.com/h/bjaf/77wklbrj.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html