用途
新着
履歴
言語


  • GoogleAppsScript
  • Git

jQuery 画像遅延読み込みのサンプル

jQuery 画像遅延読み込みのサンプル
jQuery 画像遅延読み込みのサンプル
たくさんの画像を読み込ませるとき、ファーストビュー以外は後で読み込ませるというサンプルです。

jQueryのプラグインでlazyloadという画像を後から読み込ませるプラグインもありますが、それを使わないで自作します。

  • いろんなオプションは必要ない
  • 細かい仕様を理解しないとたまにハマる(必要でない画像を非表示にしてしまったり)
  • プラグインなのでバージョンをチェックしないといけない

ということで、jQueryのみで書いたブラウザの表示するタイミングで読み込むサンプルがこちら。

// 変数名いろいろ
var posi_top,wih_half,current_view;
// 画面の上から90%にそのdivが通過したら
var start_position = 0.9;

$(document).ready(function(){
        // 描画のとき
	var wih = window.innerHeight;
	var wih_half = wih * start_position;
	current_view = wih_half;
        // 表示する通過位置を算出
	demo_set_posi();
});

$(window).resize(function() {
        // リサイズの時
	var wih = window.innerHeight;
	var wih_half = wih * start_position;
	current_view = wih_half;
        // 表示する通過位置を算出
	demo_set_posi();
});

$(window).scroll(function(){
        // スクロールの時
	var wih = window.innerHeight;
	var wih_half = wih * start_position;
	current_view = $(this).scrollTop() + wih_half;
        // 表示する通過位置にスクロール分を足す
	demo_set_posi();
});

function demo_set_posi(){
	$('img.demo_lazy').each(function() {
                // 特定のクラスがついたアイテムの位置
		var posi = $(this).offset();
		posi_top = posi.top;

		if(current_view > posi_top){
                        // 表示位置を超えたら、srcに代入し呼び出す。
			if($(this).attr("src") === undefined){
				i = $(this).attr("data-original");
				$(this).hide();
				$(this).attr("src",i);
				// 一度隠しておいて、画像を読み込んだらフェードイン!
				$(this).load(function() {
					$(this).fadeIn();
				});
			}
		}
	});
}

HTMLはこれだけ

<img class="demo_lazy" data-original="/img/demo/cat/001.jpg" src="">

src=を指定せず、data-original=にイメージパスを仮置きしておくのは、lazyloadと同じです。

実行結果

以上、やりたいところだけを実装した画像の後読み込みの例でした。

ご参考まで。

2019-08-08 00:56:46
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top