定番
新着
履歴

jQuery 画像読み込んでから発火

jQuery 画像読み込んでから発火
重い画像を読み込んだ後に表示します。

大きな画像や画質の高い画像は読み込みに若干時間がかかります。

読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりします。

単純に画像の読み込みを待ってからJSを発火させるという回避策を紹介します。

以下はページ表示時に画像の読み込みを開始し、終わると画像を表示するボタンを表示します。

画像読み込み中
一挙に表示

画像はCSSで「display:none;」にしておく必要があります。

jQueryのサンプルコードはこちら

$(function() {
for (var i = 0; i < $('img.loaded').length; i++) {
	$('img').eq(i).load(function() {
		$('#img_info').html('画像を'+i+'つ読み込み完了!');
		$('#img_info').css('background-color','blue');
		$('.demo_btn').fadeIn();
	});
};

$('.demo_btn').on('click', function(e) {
	$('.loaded').fadeIn();
});

});

裏側で画像が読み込まれたかどうかは、コンソールで確認できます。

2018-06-20 12:37:26
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top