純粋な 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 コンテナと元の画像アドレス配列、サムネイルのクラス名、サムネイル アドレスです。詳細については独自のプロジェクトを参照してください。特定の画像アドレス
})();

関連ラベル：

批量图片 预览加载

ソース：php.cn

前の記事：jQuery_jquery に基づく星評価プラグイン 次の記事：ウィンドウ サイズ、すべてのブラウザーと互換性のある JS コードを取得する_JavaScript スキル

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...

から 2024-04-06 16:01:27

0

1

397

ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...

から 2024-04-06 15:33:12

0

1

433

CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか? 私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付し​​ます。実際には、これらすべてのカードが配置さ...

から 2024-04-06 12:52:14

0

1

339

顔認証端末 iVMS-4200 と基盤の接続に問題がある 顔認証端末 iVMS-4200 が mysql データベースに接続するとエラーが表示されます。 YouTubeから以下の動画を参考にしてみました。しかし、保存するとエラーが表示され...

から 2024-04-06 12:20:33

0

1

347

関連トピック

詳細>

• ヘッドフォンをコンピュータに接続しても反応がないのはなぜですか?
• Matlab で axis 関数を使用する方法
• SQL クエリ ステートメントの完全なコレクション
• while ループと do while ループの違い
• Wordで空白ページを削除する方法
• RGBから16進数への変換
• JSPページング関数の実装方法
• Douyinはビデオをダウンロードして保存できません