向下滚动页面加载图片的js - Caly pc

js代码 scroll.photo.js :

window.imgscroll = {
    options: {
        target: null, //插入图片的目标位置
        img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}]
        img_max: 0, //图片数量
        img_num: 0, //图片累计已加载的数量
        step_max: 3, //每轮加载图片的数量 从0开始计数
        step_num: 0, //每轮已加载图片的数量
        img_obj: new Image(),
        s_scroll: 0, //滑动条的Y轴位置
        w_height: 0, //页面内容的高度
        l_height: 500, //小于此参数则开始加载图片
        w_width: 640 //浏览器窗口宽度
    },
    onLoad: function(){
        if(this.options.img_num >= this.options.img_max){
            $("#img_load").hide(); //隐藏loading图标
            return;
        }
        this.options.img_obj.src = this.options.img_list[this.options.img_num].url;
        this.options.img_obj.onload = function(){
            imgscroll.endLoad(this.width);
        };
    },
    endLoad: function(width){
        width = this.options.w_width > width? width+"px": "98%";
        this.options.target.append('<div style="text-align:center;color:#999;padding-bottom:10px;"><img src="'+this.options.img_list[this.options.img_num].url+'" width="'+width+'"><br /><span>'+ (this.options.img_num+1) +'/'+ this.options.img_max +'</span></div>');
　　　　 this.options.img_num += 1;
        if(this.options.step_num < this.options.step_max){this.options.step_num += 1;
            this.onLoad();
        }else{
            //结束一轮加载后将每轮已加载图片数量归零
            this.options.step_num = 0;
        }
    },
    beLoad: function(target,img_list){
        this.options.target = target;
        this.options.img_list = img_list;
        this.options.img_max = img_list.length;
        this.options.l_height = $(window).height()*2;
        this.options.w_width = $("body").width();
        //绑定滑动条的判定
        $(window).scroll(function(){
            imgscroll.options.s_scroll = $(window).scrollTop();
            imgscroll.options.w_height = $("body").height();
            if((imgscroll.options.w_height-imgscroll.options.s_scroll) < imgscroll.options.l_height){
                if(imgscroll.options.step_num < 1) imgscroll.onLoad();
            }
        });
        this.onLoad();
    }

};

页面代码 :

<!DOCTYPE html>
<html>
<head>
    <title>向下滚动页面加载图片</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/scroll.photo.js"></script>
    <script type="text/javascript">var imglist = [{ url: "CMF01_000.jpg"},{ url: "CMF01_001.jpg"},{ url: "CMF01_002.jpg"},{ url: "CMF01_003.jpg"},{ url: "CMF01_004.jpg"},{ url: "CMF01_005.jpg"},{ url: "CMF01_006.jpg"}];

        $(function(){
            imgscroll.beLoad($("#img_list"),imglist);
        });
    </script>

</head>
<body style="background:#444;padding-top:20px;">
    <div id="img_list"></div>
    <div id="img_load" style="text-align:center;color:#AAA;"><img src="loading.gif" /><br /><span>少女读取中...</span></div>
</body>
</html>

posted on 2013-07-03 10:33 Caly pc 阅读(3135) 评论(0) 收藏举报

刷新页面返回顶部