Written by Kasumi

jQueryで画像読み込み完了後にイベントを実行する方法

jQueryで画像読み込み完了後に任意のイベントを実行したい。

本記事ではこのような悩みを解決します。

解決コード

$(function () {
$(window).load(function () {
// 任意のイベント
  });
});

上記解決コードです。

jQueryで【画像読み込みが完了後】を認識するには以下$(window).load()メソッドを用います。

$(window).load(function () {});

上記メソッド内に画像読み込み完了後に実行したい任意のイベントを記述すればOKです。

まとめ

スライダープラグインを実装した時、ページ読み込み後スライダー画像が縦積みになり崩れる現象が多々ありました。

そんな時、$(window).load()メソッドを使って画像読み込み後にスライダーを表示する処理を書いて解決しました。

参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
1198
jQuery

【簡単】スマホでよくある横スライドメニューを実装する方法【jQuery・CSS使用】

更新日:2022.09.09
2156
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
518
jQuery

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

更新日:2022.09.09
5365