页面所有图片不一次性加载完（懒加载+lazyLoad+带滚动条页面）例子

首页图片很多，要是全部一次性加载会很慢。一个懒加载例子（提高页面响应速度）：

需要jquery.js：

<script src="jquery-1.7.1.min.js"></script>

CSS样式：

      <style type="text/css"> 
    #lazyLoadImage img{ width:159px; height:71px; border:1px solid #CCCCCC; padding:3px; float:left; margin:10px; visibility:visible;opacity:0.00;filter:alpha(opacity=00);-moz-opacity:0.0;} 
    </style>

HTML页：

 

<script>
function imgLazyLoad(){//扫描需要加载的div
    $.each($("#lazyLoadImage img"),function(i,o){
        //获取窗口高
        var windowHeight=$(window).height();
        //获取滚动条
        var scrollTop=$(document).scrollTop();
        windowHeight=windowHeight; //可以设置滚动条在显示某个高度来lazyload   windowHeight=windowHeight/2; 比如在显示屏幕高度2分之1的时候加载


        //先判断是否是加载完的图片 跳出
        if($(o).attr("src")==$(o).attr("pic")){
            return true;
        }else if( $(o).offset().top<=(scrollTop+windowHeight)  && $(o).offset().top >= scrollTop ){//判断div是不是出在可见的位置
            if($(o).attr("pic") != undefined || $(o).attr("pic") != "undefined" ){
                var ObjectSrc = $(o).attr("pic");
                //把pic的值赋给src值
                $(o).attr("src",ObjectSrc);
                //css属性改为可见
                $(o).css("visibility","visible");
                //渐变时间和渐变值
                $(o).fadeTo(1000,1.00);
            }
        }
    });
}
$(function(){//页面第一次加载时
    imgLazyLoad();//初始化
    //判断浏览器
    if($.browser.msie){
        //IE浏览器
        $(window).scroll(imgLazyLoad);//浏览器的兼容
    }else {
        //其他浏览器 ff chrome 测试通过
        $(document).scroll(imgLazyLoad);//当滚动条滚动时,扫描需要加载的div
    }

    //$("body").scroll(imgLazyLoad);//浏览器的兼容   不清楚是哪款浏览器
});
</script>




<div id="lazyLoadImage">
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
...请批量复制多个图片
<div>

原文地址：http://blog.csdn.net/sd4000784/article/details/7880324