纯JS原创多批图片预览加载,不看你就后悔吧!

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

2.可能在这个页面的预览效果不好,但是原理是对的,在这上面太难改了,也没时间去改了,欢迎转载 http://www.cnblogs.com/nothingbrother/archive/2011/08/11/2135133.html