提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

纯JS实现的批量图片预览加载功能

JS批量 实现 功能 图片 加载 预览
2023-06-13 09:14:30 时间
1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果
复制代码代码如下:

<divstyle="height:2500px;"id="txtScrollTop">
</div>
<divid="galleryList">
</div>

复制代码代码如下:

varutil={
$:function(id){
returndocument.getElementById(id);
},
getElementsByClassName:function(oElm,strTagName,strClassName){
vararrElements=oElm.getElementsByTagName(strTagName);
vararrReturnElements=newArray();
strClassName=strClassName.replace(/-/g,"\-");
varoRegExp=newRegExp("(^|\\s)"+strClassName+"(\\s|$)");
varoElement;
for(vari=0;i<arrElements.length;i++){
oElement=arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
returnarrReturnElements;
},
getXY:function(obj){
varsumTop=0,sumLeft=0;
while(obj!=document.body){
sumLeft+=obj.offsetLeft;
sumTop+=obj.offsetTop;
obj=obj.offsetParent;
}
return{x:sumLeft,y:sumTop}
}
};

varGalleryViewer={
GalleryContainer:{},
smallImgs:[],//小图片数组
orginalImgs:[],//原始图片数组
init:function(id,imgs,classname,smallImgSrc){
this.GalleryContainer=util.$(id);
this.orginalImgs=imgs;
for(vari=0;i<imgs.length;i++){//追加所有预览小图片
varimg=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();
}
varmousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel"//FFdoesn"trecognizemousewheelasofFF3.x
if(document.attachEvent)//ifIE(andOperadependingonusersetting)
document.attachEvent("on"+mousewheelevt,GalleryViewer.orginalImgsAppear);
elseif(document.addEventListener)//WC3browsers
document.addEventListener(mousewheelevt,GalleryViewer.orginalImgsAppear,false);
},
preloadImages:function(){
for(vari=0;i<GalleryViewer.orginalImgs.length;i++){
(function(i){
varimagePreload=newImage();
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(){

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

相关文章