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

コーポレートサイトにちょうどいい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オブジェクト

});