純JS實(shí)現(xiàn)的批量圖片預(yù)覽加載功能
更新時(shí)間:2011年08月14日 17:39:59 作者:
需要一張轉(zhuǎn)圈的小圖片,需要預(yù)覽的所有圖片默認(rèn)的位置全是這張小圖片,滾輪滾到原圖需要出現(xiàn)的位置時(shí)候,預(yù)覽加載替換小圖片
1.實(shí)現(xiàn)原理直接見(jiàn)代碼,需要一張轉(zhuǎn)圈的小圖片,需要預(yù)覽的所有圖片默認(rèn)的位置全是這張小圖片,滾輪滾到原圖需要出現(xiàn)的位置時(shí)候,預(yù)覽加載替換小圖片.實(shí)現(xiàn)效果
<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: [], //小圖片數(shù)組
orginalImgs: [], //原始圖片數(shù)組
init: function (id, imgs, classname, smallImgSrc) {
this.GalleryContainer = util.$(id);
this.orginalImgs = imgs;
for (var i = 0; i < imgs.length; i++) { //追加所有預(yù)覽小圖片
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) {//如果初始在頁(yè)面開(kāi)始部位直接預(yù)覽加載
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]; //預(yù)加載大圖片
if (imagePreload.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存,直接調(diào)用回調(diào)函數(shù)
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");
//參數(shù)函數(shù)分別為div.id容器,原圖地址數(shù)組,小圖的類名,小圖地址,具體圖片地址請(qǐng)參照自己的項(xiàng)目
})();
復(fù)制代碼 代碼如下:
<div style="height: 2500px;" id="txtScrollTop">
</div>
<div id="galleryList">
</div>
復(fù)制代碼 代碼如下:
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: [], //小圖片數(shù)組
orginalImgs: [], //原始圖片數(shù)組
init: function (id, imgs, classname, smallImgSrc) {
this.GalleryContainer = util.$(id);
this.orginalImgs = imgs;
for (var i = 0; i < imgs.length; i++) { //追加所有預(yù)覽小圖片
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) {//如果初始在頁(yè)面開(kāi)始部位直接預(yù)覽加載
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]; //預(yù)加載大圖片
if (imagePreload.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存,直接調(diào)用回調(diào)函數(shù)
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");
//參數(shù)函數(shù)分別為div.id容器,原圖地址數(shù)組,小圖的類名,小圖地址,具體圖片地址請(qǐng)參照自己的項(xiàng)目
})();
您可能感興趣的文章:
- JS HTML5拖拽上傳圖片預(yù)覽
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js 上傳圖片預(yù)覽問(wèn)題
- javascript實(shí)現(xiàn)上傳圖片并預(yù)覽的效果實(shí)現(xiàn)代碼
- php+js實(shí)現(xiàn)圖片的上傳、裁剪、預(yù)覽、提交示例
- jsp中點(diǎn)擊圖片彈出文件上傳界面及預(yù)覽功能的實(shí)現(xiàn)
- 用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
- 輕松實(shí)現(xiàn)js圖片預(yù)覽功能
- JS上傳前預(yù)覽圖片實(shí)例
- javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
- JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果完整實(shí)例【測(cè)試可用】
相關(guān)文章
教你使用html+css制作一個(gè)3D立體相冊(cè)
這篇文章主要介紹了教你使用html+css制作一個(gè)3D立體相冊(cè),可以360度旋轉(zhuǎn)放置6張圖片,是不是很炫酷,快跟著小編一起來(lái)看看如何制作吧2023-03-03使用html+css實(shí)現(xiàn)頁(yè)面書本翻頁(yè)特效
很多朋友都知道通過(guò)靜態(tài)html+css可以創(chuàng)造出很多的頁(yè)面效果,本文所講的就是html+css模擬書本翻頁(yè)效果,還是很不錯(cuò)的,需要的朋友可以參考下2023-03-03List the Stored Procedures in a SQL Server database
List the Stored Procedures in a SQL Server database...2007-06-06發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來(lái)照顧一下博客吧,這里先把眼前就有的一個(gè)小東西拿出來(lái)和大家分享一下,這是2006年的時(shí)候(文本里記下了時(shí)間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07推薦自用 Javascript 縮圖函數(shù) (onDOMLoaded)……
推薦自用 Javascript 縮圖函數(shù) (onDOMLoaded)……...2007-10-10用js實(shí)現(xiàn)上傳圖片前的預(yù)覽(TX的面試題)
用js實(shí)現(xiàn)上傳圖片前的預(yù)覽(TX的面試題)...2007-08-08