मैं सीएसएस फ़ाइल से छवियों को तेजी से डाउनलोड करने के लिए ब्राउज़र को कैसे प्रोत्साहित कर सकता हूं?


13

मैं अपनी बहुत सी छवियों (जैसे पृष्ठभूमि के लिए <div>) को रखने के लिए सीएसएस का उपयोग करता हूं और मुझे अक्सर लगता है कि वे इस तरह से बहुत धीरे-धीरे लोड होते हैं। वे लोड करने के लिए अंतिम चीज़ लगते हैं। इस तरह से दिखाने के लिए भी छोटी छोटी आइकन छवियां थोड़ी समय लेती हैं। क्या ब्राउज़र को छवियों के लिए प्राथमिकता बताने का कोई तरीका है? या इसे पहले CSS फ़ाइल में छवियों को डाउनलोड करने और उन्हें पहले प्रस्तुत करने के लिए मिलता है?


सीएसएस स्प्राइट आपके अन्य प्रश्न का उत्तर देता है, शायद यह भी हल करने में मदद करेगा।
असंतुष्टगीत

जवाबों:


10

CSS स्टाइल के लिए है, कंटेंट के लिए नहीं। स्टाइल जोड़ने से पहले ब्राउजर्स (सही तरीके से) कोशिश करते हैं और सामग्री प्रदर्शित करते हैं, इस कारण शैली-पत्रक में छवियां आमतौर पर अंतिम रूप से डाउनलोड की जाती हैं। यदि चित्र आपकी सामग्री के लिए महत्वपूर्ण हैं, तो उन्हें मानक HTML <IMG>टैग के माध्यम से जोड़ें ।


2
महान सलाह, विशेष रूप से अंतिम वाक्य। सजावट के लिए छवि: सीएसएस; सामग्री के लिए चित्र: HTML
असंतुष्ट AugGo

1
डैनियल की छवियों का वर्णन जो वह ("पृष्ठभूमि", "आइकन") का जिक्र कर रहा है, उन्हें सामग्री के विपरीत सजावट की तरह बहुत अच्छा लगता है। मुझे लगता है कि सीएसएस में उनका होना सही है।
बॉबी जैक

5

अपनी स्टाइलशीट से निरपेक्ष यूआरआई का उपयोग करें और<div> पेज पर छिपे हुए आईएमजी टैग से छवियों को जोड़ें (यह मानता है कि आप हर पृष्ठ पर समान छवियों का उपयोग कर रहे हैं; आदर्श रूप से पाद लेख में इसलिए वे सभी लोड किए गए हैं और किसी भी पृष्ठ पर कॉल किए गए हैं )।

पृष्ठ पर छवियों को प्राथमिकता मिलती है और, एक बार छवियों को कैश होने के बाद, वे बाद के पृष्ठ अनुरोधों पर तुरंत रेंडर करेंगे।


2

उन ब्राउज़रों के लिए जो डेटा का समर्थन करते हैं URI प्रकार (देखें http://en.wikipedia.org/wiki/Data_Uri जानकारी के लिए) CSS में ही छवि को शामिल करने के लिए।

हालांकि इसके कुछ नुकसान भी हैं:

  • जब सीएसएस अलग से कैश किया जाता है, तब तक डेटा फिर से लोड किया जाता है, हालांकि जब तक कि आपका सीएसएस नियमित रूप से नहीं बदलता है तब तक यह एक समस्या नहीं है।
  • सीएसएस की विरासत की कमी और इस तरह के साधन कई बार हो सकते हैं (बैंडविड्थ को बर्बाद करना) जब आपको एक ही ग्राफिक को कई बार शामिल करना होता है या अपने दस्तावेज़ में उपयोग की जाने वाली कक्षाओं को बदलना होता है।
  • इस तरह से उपयोग किए जाने पर चित्र बेस 64 एनकोडेड होते हैं, जिसका अर्थ है कि वे अधिक बैंडविड्थ लेते हैं (हालांकि यदि आप डेटा संपीड़ित भेज रहे हैं तो बैंडविड्थ समस्या बहुत कम महत्वपूर्ण है)।
  • आपको उन ब्राउज़रों के लिए वैकल्पिक शैली प्रदान करने की आवश्यकता होगी जो डेटा यूआरआई का समर्थन नहीं करते हैं, जिनमें से कुछ असामान्य हैं (उदाहरण के लिए IE6 और IE7)।

1

अभी तक यह निर्दिष्ट करने का कोई तरीका नहीं है कि कौन सी फाइलें पहले डाउनलोड करें। FYI करें, पृष्ठभूमि चित्र के रूप सीएसएस फ़ाइलों में निर्दिष्ट छवियों डाउनलोड पिछले शायद इसलिए है क्योंकि ब्राउज़र उन्हें गैर-सामग्री को देखता है और इस तरह तो बचने के एक निम्न प्राथमिकता उन्हें महत्वपूर्ण छवियों के लिए उपयोग कर रहा है कि आप जल्दी से लोड करना चाहते हैं।



1

अपनी छवियों को यथासंभव छोटा करें। अनावश्यक बाइट्स को हटाने के लिए आप smush.it का उपयोग कर सकते हैं ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.