当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 纯JS实现的批量图片预览加载功能

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

2019年07月19日  | 移动技术网IT编程  | 我要评论
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容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目
})();

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网