JQuery - イメージオブジェクトに背景イメージを設定

Question

私はJQueryを初めて使用しました。私はそれを使って概念実証を試みています。私はJQueryを使用して、1）大きな（> 500kb）イメージファイルをダウンロードしようとしています。2）イメージをダウンロードするときに要素の背景として設定します。3）フェードインします（基本的にはBing.comで行います）。 StackOverflowコミュニティは、hereと表示されているように、この問題のほとんどを寛大な助けにしてくれました。しかし、私はまだ分かりませんが1つの問題があります。

ダウンロードしたイメージをHTML要素の背景イメージにするにはどうすればよいですか？私がhttp://jqueryfordesigners.com/image-loading/で見るコードは、image要素をDIVに追加します。しかし、一度ダウンロードして消すとDIVの背景イメージとしてイメージを設定したいのですが、これは可能ですか？私はこれについて円で回り続けるようだ。ありがとうございました。

Answer 1

：<div id="loader"><div class="image"></div></div>に別のdiv（width: 100%; height: 100%）を追加します。

$("#loader").append(this);の代わりに$("#loader div.image").css("background","url(images/headshot.jpg) no-repeat 0 0");のようにする必要があります。このようにして、img要素はドキュメントツリーからは見えなくなりますが、バックグラウンド - うまくいけばキャッシュされます。少なくともほとんどのブラウザはそうするでしょう - あなたのdivに表示されます。

最後に.fadeIn()で内側のdivに影響を与えます。

これを自分で試したことはありませんが、このようなものでなければなりません。

Answer 2

イメージをダウンロードするためにブラウザを使用していると仮定すると、イメージはブラウザのキャッシュに保存されます。 DIVの背景イメージをイメージのURLに設定すると、それを2回目にダウンロードするのではなく、キャッシュからロードするだけです。その後、イメージオブジェクトを破棄することができます。

しかし、CSSの背景画像にトランジション効果を適用する方法はわかりません。フェードインが難しい場合は、DIVの背景色を透明に設定し、画像要素をDIVの後ろに配置する方がよい場合があります。その後、通常のjQueryテクニックを使用してフェードインすることができます。

Answer 3

は実際に、あなたがしなければならないすべては、ブラウザがそのの世話をしますので、あなたは完全に、「ダウンロード」部分をスキップすることができ

$("#myDiv").css({background-image: "url('http://someserver.com/someImage.jpg')"}) 

のようなものです。

Answer 4

私はその質問に私の答えで言った。ダウンロード後はキャッシュに保存されているため、2度目にはダウンロードされません。