纯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 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
实现无刷新联动例子汇总
May 20 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
vue解决跨域问题(推荐)
Nov 10 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
php header功能的使用
2013/10/28 PHP
php之readdir函数用法实例
2014/11/13 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
json 定义
2008/06/10 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JS高级运动实例分析
2016/12/20 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
学习python的前途 python挣钱
2019/02/27 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
python中PyQuery库用法分享
2021/01/15 Python
寄语是什么意思
2014/04/10 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
退休欢送会致辞
2015/07/31 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python