Ajaxで画像が完全に読み込まれてから表示させるには？

Question

jQueryベースのAjaxを使って、自作の画像スライダーを制作しました。
.doneや.completeの後に画像を表示するようにfadeInを入れたのですが、画像がまだ完全に読み込まれる前に表示してしまうのであまりきれいではありません。（ローディングGIF画像は入れています）

そこで初回のアクセス時のみ5秒待ってから表示させる方法にし、思い通りの結果は得られたのですがあまりスマートとは言えないです。

画像が完全に読み込まれたら、fadeInを実行するにはどうしたらいいでしょうか？

function ajaxAction() {
		var loadFile = $('#switch-mode dd a.active').attr('href');
		var url = location.href;
		$.ajax({
			type: 'GET',
			url: loadFile,
			dataType: 'html'
		}).done(function(data){
			$('#slider').append(data);
			sliderMotion();
		}).complete(function(){
			// If first time to visit the page.
			if (isFirstVisit) {
				setTimeout(function(){ 
					$('#loading').remove();
					$('#main-cont').fadeIn(1000);
			 	}, 5000);
			 	isFirstVisit = false;
			} else {
				$('#loading').remove();
				$('#main-cont').fadeIn(1000);
			}
			
		});
	}

Comments

[karamarimo]

ajax で取得した html の中に画像が含まれているということでしょうか？

[balls]

はい、そうです。読み込み先のHTMLに画像が含まれていて、ローディング画像が消えると、画像がフェードインするようにしたいのですが、現状は、ローディング画像が消えて画像が徐々に表示されてしまいます。

[karamarimo]

でしたら私の回答をご覧ください。

Answer 1

画像の読み込みが完了するとloadイベントが発生するので、その時にfadeInすればいいのではないでしょうか。

demo(JSFiddle)

追記

今の場合こうすればいいのではないでしょうか。

        $.ajax({ ... }).done((data) => {
            const $img = $(data);
            $('#slider').append($img);
            sliderMotion();
            $img.on('load', () => {
                $('#loading').remove();
                $('#main-cont').fadeIn(1000);
            });
        })

Comments

[balls]

この　load　は、$.ajax　の中だと使えないんでしょうか？
.done、.complete　の後に入れてみたのですが動作しませんでした。
希望としては、$.ajaxで使えるものがほしいです。

[karamarimo]

追記しました。

Answer 2

karamarimoさんからいただいたコードで作成してみたのですが、コンソール上でエラーはでないものの、

$img.on('load', () => {
                $('#loading').remove();
                $('#main-cont').fadeIn(1000);
            });

が発動しませんでした。検証ブラウザは最新版のFirefoxです。

http://cly7796.net/wp/javascript/implement-the-loading-of-percent-display/
こちらのサイトに掲載されていたコードを参考にしたところうまくいきました。

実行内容としては、
１、読み込み先のHTML内の画像（<img>）を調べ
２、それを一つ一つ読み込み
３、読み込みを完了してからfadeInを実行

var loadFile = $('#switch-mode dd a.active').attr('href');

		$.ajax({
		    type: 'GET',
		    url: loadFile,
		    dataType: 'html'
		  }).done(function (data) {
		      const $html = $(data);
		      const $img = $('img', $html);
		      const imgNum = $img.length;
		      let count = 0;
		      let current;

		      console.log($img[0]);
		      console.log(imgNum);

		      for (var i = 0; i < imgNum; i++) {
		        const createImg = new Image(); // 画像の作成
		        // 画像読み込み完了したとき
		        createImg.onload = function () {
		          count += 1;
		        }
		        // 画像読み込み失敗したとき
		        createImg.onerror = function () {
		          count += 1;
		        }
		        createImg.src = $img[i].src; // 画像にsrcを指定して読み込み開始
		        console.log(count);
		      }

		      // ローディング処理
		      var nowLoading = setInterval(function () {
		        // 現在の読み込み具合のパーセントを取得
		        current = Math.floor(count / imgNum * 100);
		        // パーセント表示の書き換え
		        console.log(current)


		        // 全て読み込んだ時
		        if (count == imgNum) {
		          // ローディングの終了
		          clearInterval(nowLoading);
		          console.log('done.');
		          $('#slider').append($html);
		          $html.ready(function () {
		            $('#loading').remove();
		            $('#main-cont').fadeIn(1000);
		          });
		          sliderMotion();
		        }
		      }, 100);