向下滚动页面加载图片的js
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的更多相关文章
- android列表停止滚动,加载图片,较为通用的一种办法
在Adapter的itemView里面,判断列表是否在滚动中,其实是比较麻烦的,可能耦合性会比较严重. 所以考虑了下,是否能在itemView里面,检测列表的滚动状态,并监听停止状态加载图片,实现it ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- selenium chrome.options禁止加载图片和js
#新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ...
- jQuery实现的瀑布流效果, 向下滚动即时加载内容
下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器 ...
- android 解决启动页面加载图片空白以及去掉标题栏
有时候启动页面根据白天晚上来启动时实现加载不同的图片效果,但是加载时会出现短暂的空白,解决方法如下: android:theme="@android:style/Theme.Transluc ...
- Android 滚动RecyclerView加载图片时的流畅度优化
实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...
- 火狐浏览器怎么查看页面加载了那些js文件,那系js文件有作用
方法一: 右击查看原代码,点击js链接如果能够看到文件内容,证明加载成功 方法二: 按F12键,如果控制台没有加载错误,证明加载成功:
- 【vue】css解决“防抖动”——防止页面加载图片抖动
overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%
- 页面加载时调用js函数方法
方法一:在html的body中加入onload=""事件 <body onload='queryServer()'> </body> 方法二:jquery ...
随机推荐
- broadcom代码中httpd进程启动流程介绍
Broadcom代码中包含WEB配置管理媒介, 在嵌入式WEB服务器min_httpd基础上改造实现, 其bin名称为httpd,此httpd可以由管理进程有连接后动态启动,并且当一段时间内没有连接到 ...
- Latex 分段函数
Latex里面分段函数的输入: \begin{equation} P_{r-j}= \begin{cases} 0&\mbox{if $r-j$ is odd}\\ ...
- Leetcode: Reconstruct Original Digits from English
Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...
- Xamarin
快速建立原生(Native)的行动装置应用程序: 程序代码共享: 与 Visual Studio 整合: 确保第一时间更新: 原生的应用程序效能:
- :last-child
匹配最后一个子元素 :last只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素 示例 描述: 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li&g ...
- JavaWeb应用开发架构浅谈
本文就我所经历和使用过的技术和框架, 讨论 Java / Javascript 技术组合构成的Web 应用架构. 一. 概述 Web 应用架构可以划分为两大子系统:前端子系统和后台子系统. 前端子系统 ...
- Writing Your Own jQuery Plugins
Setting Up <script src="js/jquery-1.9.1.min.js"></script> <script src=" ...
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
- CentOS 7下Wireshark捕获USB数据包
1. 软件准备 安装Wireshark # yum install wireshark wireshark-gnome .csharpcode, .csharpcode pre { font-size ...
- String s ; 和 String s = null ; 和 String s = "" ; 的却别
String s ;该语句表示只是声明了一个引用变量,但是并没有初始化引用,所以对变量s的任何操作(除了初始化赋值外) 都将引发异常. String s=null; 表示未申请任何内存资源,即此语句表 ...