纯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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
留言板翻页的实现详解
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
详解微信小程序input标签正则初体验
2018/08/18 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python中static相关知识小结
2018/01/02 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python创建学生管理系统
2019/11/22 Python
了解一下python内建模块collections
2020/09/07 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
中医药大学市场营销专业自荐信
2013/09/29 职场文书
大学秋游活动方案
2014/02/11 职场文书
社区科普工作方案
2014/06/03 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
英文版辞职信
2015/02/28 职场文书
小学入学感言
2015/08/01 职场文书