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オブジェクト
		
});