プリロードの背景画像

Question

イメージをプリロードする方法はたくさんありますが、jqueryを使って背景イメージをプリロードするのに役立つものはありません。

私は私が達成したいものの単純なHTMLモックアップを作った： http://jsfiddle.net/3rfhr/

• 負荷のdivが
• 背景が
• ロードのdivが
• 背景DIVが
現れ消えロードされ、表示されます

私はdiv遷移を処理できますが、どのように私はCSSの背景を事前にロードする必要があります。私の質問を読んでくれてありがとう:)

Answer 1

それは背景画像である限り、あなたはできません。正常にロードし、背景イメージを設定します。このようなもの：

var $img = $('<img src="' + src + '">'); 
$img.bind('load', function(){ 
    $('.yourDiv').css('background-image', 'url(' + src + ')'); 
}); 
if($img[0].width){ $img.trigger('load'); } 

画像がキャッシュされている場合は、一部のブラウザで最後の行が必要です。

Answer 2

A working exampleモックsetTimeoutを使用して読み込み時間をシミュレートします。

関連のjQueryのコードは次のとおりです。

$('#LOADING-SIGN-DIV').fadeOut(); 
$('#DIV-THAT-NEEDS-PRELOADING').fadeIn(); 

Answer 3

なぜjQueryを使ってcss属性からURLをつかむない、プリロードを行うには？

var bg_url = jQuery("#DIV-THAT-NEEDS-PRELOADING").css('background-image'); 

// using regex to replace the " url(...) "... 
// apologies for my noobish regex skills... 
bg_url = str.replace(/ /g, '', bg_url); // whitespace... 
bg_url = str.replace(/url\(["']?/g, '', bg_url); // next, the 'url("'... 
bg_url = str.replace(/["']?\)/g, '', bg_url); // finally, the trailing '")'... 

// without regex, using substring if confident about no quotes/whitespace... 
bg_url = bg_url.substring(4, bg_url.length-1); 

// preloading... 
var img = new Image(); 
img.onload = function() 
{ 
    // do transitions here... 
}; 
img.src = bg_url; 

Answer 4

あなたはロジックはほぼ良好ですが、jqueryのCSSのイベントをキャッチできません。

<img>要素に背景イメージを読み込む必要があります。その要素のイベント負荷を捕まえ、起動時に背景イメージをそのsrcに変更し、残りのロジックを実行します。

Answer 5

CSSとJavaScriptを使用して画像をプリロードすると、これらの2つのリンクが簡単で役立つことを願ってください。

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/

Answer 6

ここでjQueryを使って画像をプリロードカバー先週からのポストです：HTML 5 File load image as background-image

そしてここでは、参照ポストソリューションです：http://sveinbjorn.org/dataurls_css