img要素の画像を後から読み込む
img要素がマークアップされている状態でページを読み込むと、ページが読み込まれるタイミングで画像も読み込まれます。
そこで、任意のタイミングで後から画像を読み込ませる方法をご紹介します。
なお、次の方法は何れもページ読み込み時に画像の読み込みが発生してしまいます。
- CSSでimg要素にdisplay:noneを指定。（visibility:hiddenは隠すだけなので同様）
- DOMContentLoadedイベント時、src属性を削除したり別の値に差し替える。
関数定義
/**
* img要素の画像の読み込み
* @param {Element} elem 読み込むimg要素
* @param {function} [callback] 読み込み完了後に処理する関数
* @return {Element} 読み込んだimg要素
*/
var loadImage = function(elem, callback) {
if (!elem) return;
var src = elem.getAttribute('data-original-src');
if (!src) return elem;
var imgElem = document.createElement('img');
elem.removeAttribute('data-original-src');
imgElem.onload = function() {
elem.setAttribute('src', src);
if (typeof callback === 'function') callback(elem, src);
};
imgElem.setAttribute('src', src);
return elem;
};使い方
var result = loadImage( imageElement[, callback] );引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 （必須） |
imageElement | Element | 読み込むimg要素 |
| 第二引数 | callback | function | 画像の読み込みが完了した後の処理を行う関数 |
戻り値
読み込んだimg要素を返します。
サンプルコード
HTMLのimg要素にsrc属性の代わりにdata-original-src属性を付与し値に読み込む画像を指定します。
HTML
<img data-original-src="img/sample.jpg" width="250" height="98" id="sample" />JavaScript
var imgElem = document.getElementById('sample');
loadImage(imgElem, function() {
alert('読み込み完了');
});