web-dev-qa-db-ja.com

CSSの背景画像が読み込まれたことを確認するにはどうすればよいですか？イベントは発生しますか？

画像の背景を持つサイドバーウィジェットがあります。

この上に検索入力フォームがあります。画像が読み込まれる前に入力を表示したくありません。

通常のimg要素/オブジェクトのようなCSS背景画像にloadイベントハンドラーをアタッチする方法はありますか？

これは通常の画像で実行できることはわかっていますが、画像はスプライトの一部であるため、CSSの背景として保持したいと思います。私はjQueryを使用しているので、jQueryまたはプレーンDOMJSを使用したソリューションも同様に優れています。

javascriptjquerycssbackground-imagedom-events
20
Cole

DOM /非表示の画像を使用して同じ画像を読み込み、その上のloadイベントにバインドすることができます。ブラウザのキャッシュは、画像を2回読み込まないように注意する必要があります。画像がすでに読み込まれている場合、イベントはすぐに発生するはずです...テストされていません。

22
Félix Saparelli

Chromeでは、jQueryの.ready（）を使用するとうまくいくようです。これが私のフィドルです：

http://jsfiddle.net/pWjBM/5/

画像は私が選択したランダムなもので、適度に大きいです。実際、一部のテストでは読み込みに非常に長い時間がかかるため、少し小さいものに置き換える価値があるかもしれません。しかし、最終的な結果は私が思うものです。ロードには時間がかかり、ロードされるとアラートが表示され、テキストボックス（#txt）が表示されます。 Firefoxでも動作するようです。他のブラウザについてはよくわかりません。

編集：ああ、それはChrome、Firefox、Safariで動作するようです。 IE8では動作しません。だから...それはすべての実際のブラウザで動作します:)

EDIT2：何度もいじった後、Allesandroと私自身のソリューションの組み合わせが機能しているようです。非表示のimgで.ready（）を使用して、画像が実際に読み込まれるタイミングを検出し、CSSの背景に読み込みます。

http://jsfiddle.net/pWjBM/41/

HTML：

<div id="testdiv">
    <input type="text" id="txt" style="display:none;" />
</div>
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />

Javascript：

$(function() {
    $('#dummy').ready(function() { 
        alert('loaded');
        $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)');
        $('#txt').show(1000);
    });
 });

CSS：

#testdiv {
    background:#aaaaaa none no-repeat right top;
    width: 400px;
    height: 400px;
}

#txt{
    margin-left: 180px;
    margin-top: 140px;
}

注：画像のURLを変更しても、ロードされたイベントが発生するため、これが機能しないことについてのコメントが以下にあります。これは実際、現在のコードで期待したとおりに機能しています。「画像」に対して指定しているURLが有効であり、実際に画像であるかどうかはチェックされません。イベントが発生するだけです。 imgの準備ができたら、背景を変更します。コードの前提は、URLが有効な画像を指していることであり、質問があれば、それ以上のエラーチェックは実際には必要ないと思います。

6
mutex

cssで背景を設定しませんが、javascript（またはより適切にはjquery）で作成されたimgタグに画像をロードします。ロードされると、ロードイベントが発生します。このイベントが発生したら、styleプロパティをdivに適用します

1
Alessandro Pezzato

あなたはこれを試すことができます、それはかなり基本的です。

function onImageLoaded(url, callback) {
    const img = new Image();
    img.src = url;
    img.onloadend = callback;   //Image has loaded or failed
    return;
}

背景画像とimgタグで機能します。

0
Ric Flair