需要一张转圈的小图片, 需要预览的所有图片默认的位置全是这张小图片, 滚轮滚到原图需要出现的位置时候, 预览加载替换小图片
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目
- })();
来源: