無限スクロールで画像の読み込みをカウントする

以前に実装した無限スクロールに、画像の読み込みをカウントする機能を追加してみます。

サンプルコード

HTMLとCSSは以前の記事と変更ありませんので省略します。

JavaScript

$(function() {
	// 使用する要素名
	var IScontentItems = '.list__item'; // 取得する要素
	var IScontent = '.list'; // 取得要素を追加するコンテンツ
	var ISlink = '.pager__next'; // 次のページのリンク
	var ISlinkarea = '.pager'; // 次のページのリンクの親要素
	var loadingFlag = false; // 読み込み中はtrueにして、複数回発生しないようにする

	var ISbaseCount = 0; // 画像読み込みの疑似的なカウント
	var ISimgCount = 0; // 画像読み込みの実際のカウント
	var ISimgTotal = 0; // 次に読み込まれる画像枚数
	var ISCountSpeed = 200; // 画像読み込みの疑似的なカウントの速度
	var nowLoading = null; // ローディング処理実行時のタイマー

	$(window).on('load scroll', function() {
		// 次のページ読み込み中の場合は処理を行わない
		if(!loadingFlag) {
			var winHeight = $(window).height();
			var scrollPos = $(window).scrollTop();
			var linkPos = $(ISlink).offset().top;

			if(winHeight + scrollPos > linkPos) {
				loadingFlag = true;

				// 次のページのリンクを取得して、要素を削除しておく
				var nextPage = $(ISlink).attr('href');
				$(ISlink).remove();
				// 次のページの要素を取得
				$.ajax({
					type: 'GET',
					url: nextPage,
					dataType: 'html'
				}).done(function(data) {
					// 次のページのリンクを取得
					var nextLink = $(data).find(ISlink);
					// コンテンツ要素を取得
					var contentItems = $(data).find(IScontentItems);
					// コンテンツ内の画像を取得
					var imgsSrc = contentItems.find('img');
					// 画像枚数を取得
					ISimgTotal = imgsSrc.length;

					// ローディング処理の開始
					nowLoading = setInterval(function() {
						if(ISbaseCount <= ISimgCount) { // ISbaseCountがISimgCountを追い抜かないようにする
							ISbaseCount += 1;

							// 現在の読み込み具合のパーセントを取得
							var current = Math.floor(ISbaseCount / ISimgTotal * 100);
							console.log('現在の読み込み進捗:', current, '%');

							// 全て読み込んだ時
							if(ISbaseCount >= ISimgTotal) {
								// ローディングの終了
								clearInterval(nowLoading);

								// カウントを0に戻しておく
								ISimgCount = 0;
								ISbaseCount = 0;
								ISimgTotal = 0;

								// コンテンツ要素を追加
								$(IScontent).append(contentItems);

								// 次のページがある場合はリンクを追加する
								if(nextLink.length > 0) {
									$(ISlinkarea).append(nextLink);
									loadingFlag = false;
								}
							}
						}
					}, ISCountSpeed);

					// 画像読み込みのカウントの処理
					for (var i = 0; i < ISimgTotal; i++) {
						var img = $('<img>');
						img.on('load', function() {
							ISimgCount++;
							console.log('現在の読み込み枚数:', ISimgCount)
						});
						img.attr('src', $(imgsSrc[i]).attr('src'));
					}
				}).fail(function () {
					alert('ページの取得に失敗しました。');
				});
			}
		}
	});
});

無限スクロールで画像の読み込みをカウントするデモページ
主に変更しているのはAjaxで取得した後の部分で、コンテンツを追加する前に画像を読み込む処理と読み込み状況をカウントする処理を追加しています。
読み込み状況はconsole.logで表示するようにしていますが、「現在の読み込み枚数」が画像の実際の読み込み状況で、「現在の読み込み進捗」が疑似的な読み込みの進捗になります。
疑似的な読み込みは、キャッシュが残っている場合にすぐ読み込みがすぐ終わってしまうのを防ぐために入れています。
console.logで出している値を使用することで、進捗状況をゲージで表示したりもできるかと思います。