純粋な JS_Image 特殊効果で実装されたバッチ画像プレビュー読み込み機能

1. 実装原理はコード内で直接確認できます。スクロール ホイールが元の位置に到達すると、プレビューする必要があるすべての画像のデフォルトの位置が回転します。画像を表示する必要がある場合、プレビューが読み込まれ、小さな画像が置き換えられます。

コードをコピーします コードは次のとおりです。

>

コードをコピー コードは次のとおりです:

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, "-"); (^|\s)" strClassName "(\s|$)");
var oElement;
for (var i = 0; i oElement = arrElements [i];
if (oRegExp.test(oElement.className)) {
arrReturnElements.push(oElement)
}
return
},
getXY: function (obj) {
var sumTop = 0, sumLeft = 0;
while (obj != document.body) {
sumLeft = obj.offsetLeft;
sumTop = obj.offsetTop; ;
obj = obj.offsetParent;
}
var GalleryViewer = {
GalleryContainer : {},
smallImgs: [], //小さい画像配列
orginalImgs: [] , //元の画像配列
init: function (id, imgs, classname, smallImgSrc) {
this .GalleryContainer = util.$(id);
this.orginalImgs = imgs;
for ( var i = 0; i var img = document.createElement("img");
img.src = smallImgSrc;
this.GalleryContainer.appendChild(img); 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 は FF3.x の時点ではマウスホイールを認識しません
if (document.attachEvent) //IE (およびユーザー設定に応じて Opera) の場合
document.attachEvent("on" Mousewheelevt, GalleryViewer.orginalImgsAppear);
else if (document.addEventListener) //WC3 ブラウザ
document.addEventListener(mousewheelevt, GalleryViewer.orginalImgsAppear, false );
},
preloadImages: function () {
for (var) i = 0; i
(関数 (i) {
var imagePreload = new Image();
imagePreload.src = GalleryViewer.orginalImgs[i]; //大きな画像をプリロードします
if (imagePreload.complete) { //画像がブラウザのキャッシュにすでに存在する場合は、コールバック関数を直接呼び出します
GalleryViewer.ImgsChange(i, imagePreload); / / onload イベントを処理せずに直接戻ります
}
imagePreload.onload = GalleryViewer.ImgsChange(i, imagePreload) //読み込みが完了しました replace
})(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 コンテナと元の画像アドレス配列、サムネイルのクラス名、サムネイル アドレスです。詳細については独自のプロジェクトを参照してください。特定の画像アドレス
})();

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。