प्रदर्शन के मामले में, पृष्ठ पर 1000 छवियां दिखाने का सबसे अच्छा तरीका क्या है?

Question

मैं एक पृष्ठ पर 1000 छोटी छोटी छवियां दिखाने की कोशिश कर रहा हूं (बल्कि वास्तव में मेरे नियंत्रण से बाहर)।

उन्हें एक साथ सभी लोड करते समय, प्रदर्शन स्पष्ट रूप से एक बार में 1000 छवियों को प्रतिपादित करता है।

मैंने स्क्रॉल पर छवि स्रोत लागू करने (कई मात्राओं पर - 250 पीएक्स स्क्रॉल, 25 छवियों लोड इत्यादि) लागू करने का प्रयास करने की कोशिश की, फिर टाइमर पर छवियों को लोड करने का प्रयास किया।

इन तरीकों से प्रदर्शन बढ़ाने में मदद मिली लेकिन यह करने का सबसे प्रभावी तरीका क्या होगा? उन्हें अभी भी एक परेशान मात्रा में परेशानी लग रही थी - मुझे लगता है कि एक पृष्ठ पर कई छवियों को प्रस्तुत करने में एक मौलिक समस्या है, लेकिन क्या कोई बेहतर समाधान है?

संपादित करें:

निश्चित रूप से पृष्ठांकन में मदद मिलेगी, लेकिन यहाँ एक विकल्प नहीं है। साथ ही, छवियों को एपीआई से खींचा जाता है, इसलिए 1 बड़ी छवि/उपयोग sprites बनाने के लिए सुविधाजनक नहीं है।

Answer 1

के बाद से स्प्राइट/पृष्ठांकन इस स्थिति में एक विकल्प नहीं थे, मैं निम्नलिखित सबसे अच्छा समाधान पाया छवि (इसलिए 1000 तत्व हैं, प्रत्येक छवियों के साथ) display:none पर।

माता पिता तत्वों के साथ करने के लिए display:none & भी पहले 25 display:block बनाने चूक:

वर scrollPos = 0; var endEle = 0;

$ (विंडो)।स्क्रॉल (फ़ंक्शन() {

scrollPos = $(window).scrollTop(); 

    if ($(window).scrollTop() < scrollPos + 250) { 

     //load 15 images. 

     $('.myDiv img').slice(endEle,endEle+50).each(function(obj){ 
      var self = $(this); 
      var url = self.attr("role"); 
      self.attr("src", url); 
      self.parent().css("display","block"); 
     }); 

     endEle = endEle + 50; 

    } 

});

यह display:block के बगल में 50 तत्वों सेट और <src> में <img role> स्विच (जब पेज प्रदान की गई है छवि यूआरएल role में डाल दिया गया) हर बार उपयोगकर्ता स्क्रॉल 250px।

Answer 2

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

http://css-tricks.com/158-css-sprites/

Answer 3

आप एक AJAX के पृष्ठांकन नहीं बनाया जा सका, कि dynamicly पेज संख्या के आधार पर छवियों को लोड करता है? उदाहरण के लिए, प्रति पृष्ठ 25 छवियां। पहले पृष्ठ का अनुरोध करने पर, आप गतिशील रूप से अगले पृष्ठ को लोड करते हैं और इसी तरह। इस तरह, उपयोगकर्ता देरी का ध्यान नहीं देगा .. प्रदर्शन को बेहतर बनाने के लिए आप बस इतना कर सकते हैं!

आप सर्वर साइड पर छवियों को जोड़ सकते हैं और शायद लाइनों में उन्हें प्रस्तुत करना सका:

Answer 4

यहाँ एक और कोण से एक जवाब है? हालांकि यह शायद कुछ परिस्थितियों में ही काम करेगा।

Answer 5

ठीक है, मुझे लगता है कि उपयोगकर्ता उन्हें उन्हें प्रस्तुत करने के लिए सबसे अच्छा समाधान प्रस्तुत करना होगा। यानी आपका स्क्रॉलिंग दृष्टिकोण। इसका मतलब केवल उपयोगकर्ता द्वारा देखी गई कई छवियों को लोड करना होगा और उनमें से सभी एक साथ नहीं होंगे। यदि, जैसा कि आप कहते हैं, यह आपके नियंत्रण से बाहर है; तो पृष्ठों का उपयोग सवाल से बाहर है? यह पूरी तरह से एक बेहतर दृष्टिकोण होगा।

कई छवियों को वैसे भी बहुत अंतराल का कारण बनता है, क्योंकि यह बैंडविड्थ की एक बड़ी मात्रा और संभावित स्मृति का भी उपयोग करेगा।

कुछ तोड़ मरोड़ के साथ विधि 'पुस्तक पर लोड छवियों' अनुकूल है, और cruically प्रत्येक के लिए पेरेंट तत्व की स्थापना: