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>

向下滚动页面加载图片的js的更多相关文章

  1. android列表停止滚动，加载图片，较为通用的一种办法

    在Adapter的itemView里面,判断列表是否在滚动中,其实是比较麻烦的,可能耦合性会比较严重. 所以考虑了下,是否能在itemView里面,检测列表的滚动状态,并监听停止状态加载图片,实现it ...

  2. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  3. selenium chrome.options禁止加载图片和js

    #新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ...

  4. jQuery实现的瀑布流效果， 向下滚动即时加载内容

    下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写.   页面用了 ul li 做为容器 ...

  5. android 解决启动页面加载图片空白以及去掉标题栏

    有时候启动页面根据白天晚上来启动时实现加载不同的图片效果,但是加载时会出现短暂的空白,解决方法如下: android:theme="@android:style/Theme.Transluc ...

  6. Android 滚动RecyclerView加载图片时的流畅度优化

    实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...

  7. 火狐浏览器怎么查看页面加载了那些js文件，那系js文件有作用

    方法一: 右击查看原代码,点击js链接如果能够看到文件内容,证明加载成功 方法二: 按F12键,如果控制台没有加载错误,证明加载成功:

  8. 【vue】css解决“防抖动”——防止页面加载图片抖动

    overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%

  9. 页面加载时调用js函数方法

    方法一:在html的body中加入onload=""事件 <body onload='queryServer()'> </body> 方法二:jquery ...

随机推荐

  1. JSON风格指南-真经

    简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...

  2. [Android Tips] 10. Pull out /data/data/${package_name} files without root access

    #!/usr/bin/env bash PACKAGE_NAME=com.your.package DB_NAME=data.db rm -rf ${DB_NAME} adb shell " ...

  3. 湖大OJ-实验C----NFA转换为DFA

    实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...

  4. An internal error occurred during: "Building workspace".

    当在eclipse中的web工程中增加了extjs4,出现An internal error occurred during: "Building workspace". Java ...

  5. 【转】PowerShell入门（二）：PowerShell是Cmd命令行的加强版吗？

    转至:http://www.cnblogs.com/ceachy/archive/2013/01/31/PowerShell_vs_Cmd.html PowerShell是命令行的加强版吗?Power ...

  6. InnerJoin分页导致的数据重复问题排查

    2016年8月9号美好的七夕的早上,我精神抖擞地来到公司.一会之后,客服宅宅MM微信我,说一个VIP大店铺订单导出报表中一个订单有重复行.于是,我赶紧开始查探问题所在.经过一天的反复仔细追查(当然还包 ...

  7. hibernate检索方式（HQL 检索方式，QBC 检索方式，本地 SQL 检索方式）

    hibernate有五种检索方式,这儿用 单向的一对多的映射关系 例子,这儿有后三种的方式: 导航对象图检索方式: 根据已经加载的对象导航到其他对象 OID 检索方式: 按照对象的 OID 来检索对象 ...

  8. 至强CPU性能排行，从X3210起，由低至高排列。

    X3210X3220E5410E5506X5355X3320E5507X5365E5-2603E3-1220LE5-2403E5607X3330L5506X3230L5420E5-2407W3520E ...

  9. 关于 Oracle 的数据导入导出及 Sql Loader (sqlldr) 的用法

    在 Oracle 数据库中,我们通常在不同数据库的表间记录进行复制或迁移时会用以下几种方法: 1. A 表的记录导出为一条条分号隔开的 insert 语句,然后执行插入到 B 表中2. 建立数据库间的 ...

  10. assigning to 'id<UIGestureRecognizerDelegate> _Nullable' from incompatible

    tip:参考 http://stackoverflow.com/questions/9861538/assigning-to-iddelegate-from-incompatible-type-vie ...