जावास्क्रिप्ट लोड पृष्ठभूमि-छवि asynchrously

Question

क्या पृष्ठभूमि-छवि को असीमित रूप से लोड करना संभव है?

Ive ने कई jQuery प्लगइन को सामान्य छवि को एक असीमित तरीके से लोड करने के लिए देखा है, लेकिन मुझे यह नहीं पता कि यह पृष्ठभूमि-छवि को प्रीलोड/असीमित रूप से लोड करना संभव है या नहीं।

संपादित

मैं मेरी समस्या स्पष्ट। मैं इस टेस्ट साइट पर काम कर रहा हूं http://mentalfaps.com/ पृष्ठभूमि छवि प्रत्येक घंटे एक क्रॉन जॉब द्वारा ताज़ा छवियों के एक सेट से यादृच्छिक रूप से लोड की जाती है (जो फ़्लिकर कैटलॉग पर यादृच्छिक छवियां लेता है)।

होस्ट इस समय नि: शुल्क और धीमा है, इसलिए पृष्ठभूमि छवि को लोड करने में कुछ समय लगता है।

पहले ओवरले की स्थिति (पीएनजी पारदर्शी मानसिकता लोगो वाला एक) और चौड़ाई jQuery(document).ready लागत में बनाए गए फ़ंक्शन द्वारा नियंत्रित होती है।

आप पृष्ठ पर कई बार ताज़ा करने का प्रयास करते हैं, तो सही ओवरले div की चौड़ाई 0 (और इसलिए आप एक "छेद" लेआउट में देखें)

यहाँ मेरी पदों सेट करने के लिए विधि है:

function setPositions(){ 
    var oH = $('#overlay-header'); 
    var overlayHeaderOffset = oH.offset(); 
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width()); 
    if (overlayRightWidth >= 0) { 
     $('#overlay-right').width(overlayRightWidth); 
    } else { 
     $('#overlay-right').width(0); 
    } 
    var lW = $('#loader-wrapper'); 
    lW.offset({ 
     left: (overlayHeaderOffset.left + oH.width() - lW.width()) 
    }); 
} 

समस्या यह है कि $(window).width() प्रभावी विंडो चौड़ाई कम है! इसलिए चेक विफल हो जाता है और स्क्रिप्ट $('#overlay-right').width(0);

किसी भी विचार के लिए जाती है?

Answer 1

मुझे जवाब मिल गया, यह .offset() विधि के कारण एक समस्या थी जो कभी-कभी गलत मान देता था।

मैं .position() का उपयोग कर लिखने मूल्यों था: इस फाइल jquery.ImageOverlay.js में

var overlayHeaderOffset = oH.position(); 

Answer 2

यह सुनिश्चित नहीं है कि मैं वास्तव में आपके प्रश्न को समझता हूं, लेकिन पृष्ठभूमि छवियां (और अन्य सभी छवियां) पहले से ही असीमित रूप से लोड की गई हैं - ब्राउज़र HTML के विश्लेषण करते समय यूआरएल से मुकाबला करने के लिए अलग-अलग अनुरोध शुरू करेगा।

आदेश लोड हो रहा है पर पृष्ठभूमि के लिए इस उत्कृष्ट जवाब देखें: Load and execution sequence of a web page?

आप कुछ और की है तो कृपया स्पष्ट।

Answer 3

पृष्ठभूमि में कुछ लोड करने की चाल इसे एक बार लोड करना है, इसलिए अगली बार लोड होने पर यह पहले से ही कैश में है।

अपने html के अंत में निम्नलिखित रखो:

<script> 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png'; 
    }; 
    img.src = 'background.png'; 
</script> 

Answer 4

आप सिर में एक प्रीफ़ेच लिंक का उपयोग कर सकता है।

<link rel="prefetch" href="/images/background.jpg"> 

आप इन लिंक को जावास्क्रिप्ट के माध्यम से सिर में जोड़ने में सक्षम होना चाहिए।

Answer 5

जैसा कि पहले से ही उल्लेख किया गया है, पृष्ठभूमि छवि को असीमित रूप से लोड किया गया है। यदि आपको JQuery कोड से पृष्ठभूमि छवि लोड करने की आवश्यकता है तो आप एक सीएसएस क्लास या attr ("style = \" पृष्ठभूमि-छवि सेट करने के लिए addClass() विधि भी सेट कर सकते हैं: url ('myimage.png') \ "")

Answer 6

मुझे पेज लोड के लिए पृष्ठभूमि के साथ पृष्ठभूमि भरने के लिए सीएसएस का उपयोग करना पसंद है।

डोम तैयार घटना के बाद, मैं सीएसएस को संशोधित करने और पृष्ठभूमि छवि जोड़ने के लिए jQuery का उपयोग करता हूं।इस तरह, छवि लोड होने तक छवि लोड नहीं होती है। Async के बारे में निश्चित नहीं है, लेकिन यह विधि उपयोगकर्ता को एक सभ्य अनुभव प्रदान करती है।

उदाहरण: http://it.highpoint.edu/

दाईं ओर दिए गए संचालन लिंक एक पृष्ठभूमि छवि है। पृष्ठ पृष्ठभूमि रंग के साथ शुरू होता है। इसे jQuery लोड के माध्यम से पृष्ठ लोड के बाद पृष्ठभूमि छवि के साथ प्रतिस्थापित किया गया है।

Answer 7

परिवर्तन

सेट अपने ऊंचाई और चौड़ाई और इस का आनंद ...

imageContainer.css({ 
      width : "299px", 
      height : "138px", 
      borderColor : hrefOpts.border_color 
     });