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容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目 })();

　　推荐阅读

　　jQuery的插件列表(2010-1-25更新)

jQuery Scroll Follow 随屏幕滚动的层 点击查看Demo jScrollPane 自定义滚动条插件 点击查看Demo jQuery树状菜单插件 jqueryflexselect下拉框自动提示 jQuery id标签 - 8种不同的很酷的JQuery菜单例子>>>详细阅读

本文标题：纯JS实现的批量图片预览加载功能

地址：http://www.17bianji.com/kaifa2/JS/24266.html

 1/2    1