[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の中身も合わせて全部ブチ込んで、ページ全体の画像読み込みの進捗を調べるってのはさすがに乱暴だろうか。

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



コメントを残す

メールアドレスが公開されることはありません。


9 − = 三

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>