懒加载.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
     ul li {
         list-style: none;
     }
     .wrap {
         width: 602px;
         margin: 0 auto;
     }
    .wrap li{
        float: left;
        width: 300px;
        height: 200px;
    }
    .wrap img{
        width: 300px;
        height: 200px;
    }
</style>
<body>
<ul class="wrap">
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://hbimg.b0.upaiyun.com/c5ac5d2f39e2e7bbeebc5f365aeaa7b6677eeedc113d1-FMGtu3_sq320">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/40a89da8b6791d6c3f4339cca895c948369e2eb4a46a0-vse6w5zjv2t9_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/ab880e3824a0f61f3543f2576efbe37fbf19bcac14dc52-hxvosuqpk3xr_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d2e700ecd8c5746563ab05b7ffdc7166f10501e24863d-xl0unwtmaemi_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/64b88eb8ac045037623d91a8d51c9e3ecca7386b27bd52-oopugpop3nmi_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="" alt="" data-src="https://muse-img.b0.upaiyun.com/42184f629caafcc92214295ac17a765df4cca3089ec1-vzsepawwb3xr_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/c9a0b09e9f89a516c6cbef09a9f1f2132485866a261b6b-vhoc85lsdcxr_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/ba46bd170bf2e7fd416aa88497287de400c544b42ed2a-nxdv7lplow29_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/d4abe26825f61e664355999e6174ea8c07b3fe124a96d-z88hbdhlrf6r_/both/280x280">
        </a>
    </li>
    <li>
        <a href="">
            <img src="https://muse-img.b0.upaiyun.com/7952a118f5a01a7b2aa9c7571e8d2989e28f332f1896f5-r2wvyimjkyb9_/both/280x280" alt="" data-src="https://muse-img.b0.upaiyun.com/ba46bd170bf2e7fd416aa88497287de400c544b42ed2a-nxdv7lplow29_/both/280x280">
        </a>
    </li>
</ul>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
   lazyLoad();
   var lock;
   $(window).on('scroll',function(){
       if (lock){
           clearTimeout(lock);
       }
       lock=setTimeout(function(){
           console.log("ajj");
           lazyLoad();
       },200)
   });

     /*遍历图片，如果出现在窗口且没有加载过的就加载*/
    function lazyLoad(){
       $('.wrap img').each(function(){
           if(checkShow($(this))&&!isShow($(this))){
               loadImg($(this));
           }
       })
    }
/*检查图片是否出现在窗口*/
    function checkShow($img){
        var scrollHeight=$(window).scrollTop();
           var windowHeight=$(window).height();
           var offsetHeight=$img.offset().top;
           if(offsetHeight<scrollHeight+windowHeight&&offsetHeight>scrollHeight){
               return true;
           }else {
               return false;
           }
    }
    /*判断图片是否被加载过了*/
    function isShow($img){
       if($img.attr('src')===$img.attr('data-src')){
           return true;
       }
    }
     /*加载图片*/
    function loadImg($img){
        $img.attr('src',$img.attr("data-src"));
    }

</script>
</body>
</html>