baserJSで要素内の画像の読み込みを待つ

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

    Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

    window.onload でなく、一部の要素内の読み込みを待機

    要素内に限定した画像の読み込みが完了してから発火するコールバックを登録できます。

    HTML

    <div class="image-container">
        <img src="a.png">
        <img src="b.png">
        <img src="c.png">
    </div>
    
    <img src="d.png">
    <img src="e.png">
    <img src="f.png">
    

    JavaScript

    $('.image-container').bcImageLoaded(function () {
    
        // a.png, b.png, c.png の読み込みが完了してから実行されます
        // d.png, e.png, f.png はなにも干渉しません
    
        this; // => .image-container の HTMLオブジェクト
    
    });