纯JS实现的批量图片预览加载功能


Posted in Javascript onAugust 14, 2011

1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果

<div style="height: 2500px;" id="txtScrollTop"> 
</div> 
<div id="galleryList"> 
</div>

var util = { 
$: function (id) { 
return document.getElementById(id); 
}, 
getElementsByClassName: function (oElm, strTagName, strClassName) { 
var arrElements = oElm.getElementsByTagName(strTagName); 
var arrReturnElements = new Array(); 
strClassName = strClassName.replace(/-/g, "\-"); 
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
var oElement; 
for (var i = 0; i < arrElements.length; i++) { 
oElement = arrElements[i]; 
if (oRegExp.test(oElement.className)) { 
arrReturnElements.push(oElement); 
} 
} 
return arrReturnElements; 
}, 
getXY: function (obj) { 
var sumTop = 0, sumLeft = 0; 
while (obj != document.body) { 
sumLeft += obj.offsetLeft; 
sumTop += obj.offsetTop; 
obj = obj.offsetParent; 
} 
return { x: sumLeft, y: sumTop } 
} 
}; var GalleryViewer = { 
GalleryContainer: {}, 
smallImgs: [], //小图片数组 
orginalImgs: [], //原始图片数组 
init: function (id, imgs, classname, smallImgSrc) { 
this.GalleryContainer = util.$(id); 
this.orginalImgs = imgs; 
for (var i = 0; i < imgs.length; i++) { //追加所有预览小图片 
var img = document.createElement("img"); 
img.src = smallImgSrc; 
img.className = classname; 
this.GalleryContainer.appendChild(img); 
} 
this.smallImgs = util.getElementsByClassName(util.$(id), "img", classname); 
if (util.getXY(GalleryViewer.GalleryContainer).y < window.screen.height) {//如果初始在页面开始部位直接预览加载 
this.preloadImages(); 
} 
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
if (document.attachEvent) //if IE (and Opera depending on user setting) 
document.attachEvent("on" + mousewheelevt, GalleryViewer.orginalImgsAppear); 
else if (document.addEventListener) //WC3 browsers 
document.addEventListener(mousewheelevt, GalleryViewer.orginalImgsAppear, false); 
}, 
preloadImages: function () { 
for (var i = 0; i < GalleryViewer.orginalImgs.length; i++) { 
(function (i) { 
var imagePreload = new Image(); 
imagePreload.src = GalleryViewer.orginalImgs[i]; //预加载大图片 
if (imagePreload.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
GalleryViewer.ImgsChange(i, imagePreload); 
return; // 直接返回,不用再处理onload事件 
} 
imagePreload.onload = GalleryViewer.ImgsChange(i, imagePreload); //加载完成替换 
})(i); 
} 
}, 
ImgsChange: function (i, obj) { 
this.smallImgs[i].src = obj.src; 
}, 
orginalImgsAppear: function () { 
//alert(getXY(this.GalleryContainer).y - window.screen.height); 
if (document.documentElement.scrollTop > util.getXY(GalleryViewer.GalleryContainer).y - window.screen.height) { 
GalleryViewer.preloadImages(); 
} 
} 
}; 
(function () { 
var imgs1 = ['../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png']; 
GalleryViewer.init("Div1", imgs1, "smallImgs1", "../Content/images/preload.gif"); 
//参数函数分别为div.id容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目 
})();
Javascript 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
js取模(求余数)隔行变色
May 15 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
javascript中关于执行环境的杂谈
Aug 14 #Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 #Javascript
js 通用javascript函数库整理
Aug 14 #Javascript
javascript中的数字与字符串相加实例分析
Aug 14 #Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 #Javascript
javascript高级学习笔记整理
Aug 14 #Javascript
jquery获得下拉框值的代码
Aug 13 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
DEFER怎么用?
2006/07/01 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
js数组去重的方法总结
2019/01/18 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python正则表达式re模块详解
2014/06/25 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python生成九宫格图片
2018/11/19 Python
Python安装selenium包详细过程
2019/07/23 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书