ブラウザに何かが表示される前に大きな画像を読み込む方法

Question

私が作っているウェブサイトは、ウェブサイトが読み込まれたときに大きな画像が黒からぼやけてしまいます。それは良質のイメージであり、その効果は素敵です。

人が最初にウェブサイトにアクセスしたときにフェードが発生せず、画像が表示されるという問題があります。私は、不透明度がすぐに変更されたが、イメージ自体はダウンロードされていないと考えています。一旦それがキャッシュされると、サイトを再訪すると効果が示されます。

フェードインが始まる前に画像が完全にダウンロードされるようにする方法は何ですか（フェードは単純なjQueryです：$('#bg').fadeIn(1000);）？

EDIT - みなさんありがとうございます。それは解決されました。私は、私が気づいていないものを残しておきました。 imgタグではありませんでしたが、画像の背景を持つdivです。私がimgに変更したとき、$(document).ready()ファンクションはフェードの前にイメージをロードしました。ありがとうございました！

Answer 1

jQueryの.load() event handlerをご覧ください。関連付けられた要素のすべてがロードされたときに呼び出されます。画像にタグを付けると、イメージが完全にロードされたときにコールバックが呼び出されます。

Answer 2

あなたがHTMLの上部にあるIMGをロードするスクリプトを（HEADがオプションである）に置く必要があります

しかし

そのに悪い習慣。

あなたは基本的なページとボタンスクリプトでマエケをすることができます - あなたはimgをダウンロードすることができます - とロードイベントで - あなたはそれを倒すことができます。

Answer 3

私はそれは私がhttp://api.jquery.com/ready/コメントで読んで、あなたが必要な場合は、その言及誰かに気づいた

http://api.jquery.com/ready/

Answer 4

$(function() { $('#bg').fadeIn(1000)) })