[JS] 配置済み要素のbackground-image読み込みハンドリング

HTML/CSS

<style type="text/css">
	#bg {
		background: url("bg.jpg") no-repeat;
	}
</style>

<div id="bg">Lorem ipsum<div>

JavaScript

var getBgImage = (function() {

	var func;

	if ( document.documentElement.currentStyle ) {
		func = function( element ) {
			var val = element.currentStyle.backgroundImage;
			return val.replace( /(url\(|\)|")/g, '' );
		}
	} else if ( window.getComputedStyle ) {
		func = function( element ) {
			var val = document.defaultView.getComputedStyle( element, null ).getPropertyValue( 'background-image' );
			return val.replace( /(url\(|\)|")/g, '' );
		}
	}

	return func;
})();

var img,
src = getBgImage( document.getElementById( 'img1' ) );

if ( src !== '' ) {
	img = new Image();
	img.onload = function() {
		alert( '読み込み完了' );
	};
	img.src = src;
}

こういうことでいいのかな。

画像読み込み用のクラスみたいなのを作っておいて、そこに上記で得たパスやdocument.imagesの中身も合わせて全部ブチ込んで、ページ全体の画像読み込みの進捗を調べるってのはさすがに乱暴だろうか。

なんでこんなことで悩まなきゃならんのだ。

Tweet