画像遅延ロードテスト lazy loader

by iwbjp

HTML

<h1>画像遅延ロードテスト</h1>
<div><img data-src="http://dummyimage.com/600x400/000/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/111/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/222/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/333/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/444/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/555/fff" class="lazy" width="600" height="400"></div>
<div><img data-src="http://dummyimage.com/600x400/666/fff" class="lazy" width="600" height="400"></div>

CSS

div {
	width: 600px;
	height: 400px;
	margin-bottom: 400px;
}

JavaScript

$(function(){
	var $window = $(window);
	
	//遅延ロードする画像に設定するclass
	var target = $(".lazy");
	
	//遅延ロードする画像に設定するclassの上部の位置
	var targetPos = 0;
	
	//サイトの高さ
	var docHeight = $(document).height();
	
	//最初に訪れたときに表示領域にtargetがあれば画像をロード
    loadFunc();
	
	//スクロールしたときに表示領域にtargetがあれば画像をロード
	$window.on("load, scroll", loadFunc);
	
	function loadFunc(){
		
		//targetに設定したclassまで到達したら画像を読み込む
		$.each(target, function(i, item){

			//targetの上部の位置を取得
			targetPos = $(item).offset().top - $window.height();
			
			if ($window.scrollTop() >= targetPos && !$(item).attr("src") ){
				var src = $(item).data("src");
				$(item).attr("src", src);
			}
		});
		
		//最下部まで到達したときにウィンドウの上部-10pxを上回ったら
		//スクロールイベントをオフにする。
		if(($window.scrollTop() > docHeight - $window.height() - 10)){
			$window.off("scroll");
		}
	}
});