प्रीलोड पृष्ठभूमि छवि

Question

वहाँ कैसे एक छवि पहले से लोड करने के लेख की टन है, फिर भी मैं कुछ भी jQuery के साथ एक पृष्ठभूमि छवि पहले से लोड होने के बारे में उपयोगी पाते हैं नहीं कर पा रहे।

मैं मैं प्राप्त करना चाहते हैं की एक साधारण एचटीएमएल mockup बनाया: http://jsfiddle.net/3rfhr/

• एक लोड हो रहा है div प्रकट होता है
• पृष्ठभूमि भरी हुई है
• लोड हो रहा है div गायब हो जाता है
• पृष्ठभूमि DIV दिखाई

मैं div संक्रमण संभाल कर सकते हैं, लेकिन मैं कैसे करने के लिए के रूप में पता कर रहा हूँ मुझे एक सीएसएस पृष्ठभूमि preloading के बारे में जाना चाहिए। मेरे सवाल :)

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 में सीएसएस के लिए ईवेंट नहीं पकड़ सकते हैं।

आप कुछ <img> तत्व के लिए पृष्ठभूमि छवि को लोड करने की जरूरत है। उस तत्व की स्थिति लोड पकड़ो और जब यह निकाल दिया है आपको लगता है कि स्रोत के लिए पृष्ठभूमि छवि बदलने के लिए और अपने तर्क के बाकी है।

Answer 5

सीएसएस और जावास्क्रिप्ट के साथ छवियों को प्रीलोड करना, उम्मीद है कि ये दो लिंक आसान और सहायक हो सकते हैं।

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