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>