सीएसएस पृष्ठभूमि छवि शैलियों को ओवरराइड करना - दोनों छवियों को लोड किया गया है?

Question

यदि मेरे पास 2 सीएसएस शैलियों हैं जो किसी तत्व को पृष्ठभूमि छवियां असाइन करती हैं, और एक शैली दूसरे को ओवरराइड करती है। क्या दोनों छवियों को ब्राउज़र द्वारा डाउनलोड किया जाएगा या सिर्फ ओवरराइडिंग होगा?

मुझे कारण है कि मैं पूछ रहा हूं कि मैंने हाल ही में मोबाइल उपकरणों के लिए सशर्त स्टाइलशीट पर एक कार्यशाला में भाग लिया है। यदि मैं बैंडविड्थ को बचाने के लिए छोटे से अपने सामान्य बीजी छवियों को ओवरराइड करता हूं, तो क्या बड़ी छवियों को वैसे भी लोड किया जाएगा? ऐसा लगता है कि लड़का क्या कह रहा था लेकिन यह मेरे लिए अजीब लगता है कि यह इस तरह से काम करेगा।

Answer 1

यह कुछ मामलों जवाब है हां में लगता है:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

डेवलपर उपकरण में अपने ब्राउज़र में

Answer 2

क्या आप कोई प्रयोग नहीं कर सकते हैं और यह देखने के लिए वेब लॉग फाइलें देख सकते हैं कि क्या हो रहा है?

अन्यथा डिवाइस के आधार पर उचित स्टाइल शीट का चयन करने के लिए थोड़ा PHP क्यों नहीं है।

Answer 3

ओवरराइड छवि लोड नहीं की जाएगी।

बस स्पष्ट होना, उदाहरण के लिए: http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div> 

div { 
    background: url(http://dummyimage.com/600x400/000/fff) 
} 
#test { 
    background: url(http://dummyimage.com/200); 
    width: 200px; 
    height: 200px 
} 

केवल http://dummyimage.com/200 लोड किया जाएगा।

यह कम से कम क्रोम, सफारी, फ़ायरफ़ॉक्स, आईई 8/9, ओपेरा में सच है।

मैं अनुमान यह सभी ब्राउज़रों में सच है, क्योंकि यह एक सरल और प्रभावी अनुकूलन है।

Answer 4

उत्तर नहीं है। पहला व्यक्ति ओवरराइड किया गया था पृष्ठभूमि संपत्ति लोड नहीं करेगा। क्यूं कर? चूंकि ब्राउज़र किसी अन्य संसाधन को लोड करने से पहले अपनी सीएसएस फ़ाइल लोड करते हैं। वे पहले सीएसएस फाइलों को संभालते हैं, फिर आदेश और ओवरराइडिंग ऑर्डर के आधार पर छवियों को लोड करना प्रारंभ करते हैं।

उदाहरण के लिए:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites.png') no-repeat x y; 
} 

.mobile div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

ब्राउज़र अपने मोबाइल इस तरह बनने के लिए इस सीएसएस पर कार्रवाई करेंगे:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

और अब, पहले से ही लोड करने के लिए sprites_mobile.png नजरअंदाज कर दिया ब्राउज़रों।