纯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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python监控进程脚本
2018/04/12 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python浪漫表白源码
2019/04/05 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
自我鉴定200字
2013/10/28 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
情人节寄语大全
2014/04/11 职场文书
党的生日活动方案
2014/08/15 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
高考百日冲刺决心书
2015/09/23 职场文书