2012-01-16 10 views
6

मेरे पास मेरी वेबसाइट के लिए कुछ टैब हैं जहां पृष्ठभूमि-छवि बदलती है जब आप उन पर क्लिक करते हैं।सीएसएस पृष्ठभूमि छवियों को लोड करते समय देरी

हालांकि जब मैं डोम लोड होने के बाद पहली बार टैब पर होवर करता हूं, तो होवर-छवि शो से पहले थोड़ी देर हो जाती है, जिसके परिणामस्वरूप एक झटकेदार प्रभाव पड़ता है।

मुझे नहीं पता कि इस समस्या का निवारण कैसे करें, कोई विचार? :)

यहां लाइव उदाहरण: http://jsfiddle.net/timkl/fjupq/ - देरी जेएसफ़िल्ड के सर्वर पर इतनी देर तक नहीं है - लेकिन यह अभी भी वहां है।

उत्तर

11

इसका समाधान अलग-अलग छवियों के बजाय sprites का उपयोग करना है।

आप एक ही छवि, और बदले :hover पर पृष्ठभूमि स्रोत बदलने का उपयोग करते हैं, तो आप बस पृष्ठभूमि स्थिति बदल जाते हैं। इस तरह, पूरी छवि अग्रिम में लोड हो जाती है।

उदाहरण के लिए, स्टैक ओवरफ़्लो के स्प्राइट शीट की जाँच:

आप इस चरम करने के लिए इसे लेने के लिए नहीं है, आप केवल एक छवि है दोनों सामान्य है कि हो सकता है और :hover राज्यों, और इसे बाएं/दाएं या ऊपर/नीचे ले जाएं।

3

एक सरल समाधान छवि को प्री-लोड करने के लिए जावास्क्रिप्ट का उपयोग करना है। इसे पृष्ठ के शीर्ष में शामिल करें:

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script> 
संबंधित मुद्दे