js 延迟加载页面图片（当图片出现在窗口可视区域的时候加载）

简单Jquery代码，实现图片延迟加载.

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    showimg();//加载第一屏
    $(window).scroll(function(){
        showimg();//显示当前滚动位置一下两屏且没有被加载的图片
    });
});
function showimg(){
    var vtop=$(document).scrollTop();//滚动条滚动的距离
    var wheight=$(window).height();//窗口高度　
    $("img").each(function(){//遍历img
        var truesrc=$(this).attr("truesrc");//获取真实图片地址
        if(truesrc&&$(this).offset().top<=(wheight+vtop)){ //如果truesrc存在且有值的时候加载。
            $(this).attr("src",truesrc).removeAttr("truesrc");//赋值真实图片地址并移除truesrc属性防止重复加载。
        }
    });
}
</script>

<ul id="imgli">
<li><img src="images/loading.gif"  truesrc="/uploadfile/201261216522.jpg" /></li>
<li><img src="images/loading.gif"  truesrc="/uploadfile/201261522858.jpg" /></li>
<li><img src="images/loading.gif"  truesrc="/uploadfile/2012615102526.jpg" /></li>
<li><img src="images/loading.gif"  truesrc="/uploadfile/201261216522.jpg" /></li>
<li><img src="images/loading.gif"  truesrc="/uploadfile/201261522858.jpg" /></li>
<li><img src="images/loading.gif"  truesrc="/uploadfile/2012615102526.jpg" /></li>
</ul>

转载于:https://www.cnblogs.com/softlive/archive/2012/06/18/2553694.html