图片延迟加载。。。||当滚动到某位置时，图片延迟加载

转载

mob6047570116b7 2014-08-12 16:02:00

文章标签 延迟加载加载 html jquery 自动加载 文章分类 MySQL 数据库

<div class="history">
<img v="/Application/Home/View/public/images/history/chuangshou_huaniao.png" /> 
<img v="/Application/Home/View/public/images/history/line.png" width="100%"  />
</div>

function Imgload(){
　　$(".history").find("img").each(function(){
     　　$(this).attr("src",$(this).attr("v"));
     　　$(this).removeAttr("v");
　　});
}

setTimeout(Imgload,500);  //图片延迟500加载，可以提高首页的加载速度

当滚动到某位置时，图片延迟加载。。。。。。。。。。

<!doctype html>
<meta charset="utf-8">
<title>拖动 图片延迟加载----方法有点老</title>
<style>
    html,body,ul,li{margin:0;padding:0;}
    ul{list-style-type:none;}
.box{ width: 800px; height: 1000px;}
#img{ width: 800px; height: 500px;}
.box0{ height: 10px;}
    
</style>

<div class="box"></div>
    
<div id="imgs">  <!-- 图片延迟加载  方法有点老 -->
    <img v="http://g-ec4.images-amazon.com/images/G/28/app-lx/1406/och_140606_410x330_floor._V350953961_.jpg">
    <img v="http://g-ec4.images-amazon.com/images/G/28/app-lx/1406/och_140606_410x330_floor._V350953961_.jpg">
    <img v="http://g-ec4.images-amazon.com/images/G/28/app-lx/1406/och_140606_410x330_floor._V350953961_.jpg">
    <img v="http://g-ec4.images-amazon.com/images/G/28/app-lx/1406/och_140606_410x330_floor._V350953961_.jpg">
    <img v="http://g-ec4.images-amazon.com/images/G/28/shiying/20140227-99/Gateway-floorA1_410330-99gift._V340821922_.png">
    <img v="http://g-ec4.images-amazon.com/images/G/28/img14/ngateway/1600/ln_140612_lx_atf_pc._V350757869_.jpg">
</div>
<div class="box0"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(window).bind("scroll",loadImgs);
//$(window).scroll(loadImgs);

    function loadImgs(){   //声明一个图片加载函数loadImgs()

        var imgtop = $("#imgs").offset().top;   //获取id="imgs"距顶部的高度    
                      /* offset()当前元素的偏移量    offset().top：距离页面上方的位置 */
        var stop = $(window).scrollTop();   //滚动条距离顶部的高度
        console.log(stop);

            if(stop=imgtop){
                
                $("#imgs img").each(function(){   //循环id="imgs"里的所有图片
                    $(this).attr("src",$(this).attr("v"));   //替换v为src   因为src会自动加载图片
                    $(this).removeAttr("v");    
                });
                $(window).unbind("scroll");
            }
    }




    

</script>