छवियां गैलरी, प्रीलोडिंग बनाम AJAX

Question

अरे, मैं एक छवि गैलरी बनाने की कोशिश कर रहा हूं लेकिन मुझे गैलरी में प्रदर्शित होने से पहले नई छवियों का अनुरोध करने के लिए पेज लोड होने पर AJAX प्राप्त करने के लिए सभी छवियों को लोड करना चाहिए या नहीं?

नीचे दिया गया उदाहरण दिखाता है कि मैं दूसरी छवि देख रहा हूं और 2 छिपी हुई छवियां लोड की गई हैं जबकि छवि 5 AJAX अनुरोध के माध्यम से लोड हो रही है। मैं अगर मैं छवि के बीच दो भरी हुई छवियों में देखा जा रहा रखने के बारे में सोचा और छवि ajax लोड हो रहा है उन एक छवि लोड

Image Gallery (Viewing Single Image) 
    1  2  3  4  5 
+-------+-------+-------+-------+-------+ 
|  |Loaded |  | * |Loading| 
|Loaded | On |Loaded |Loaded | AJAX | 
|Hidden | Show |Hidden |Hidden |Request| 
+-------+-------+-------+-------+-------+ 

मैं तो स्थानीय होस्ट बंद प्रयुक्त ajax havent नहीं पता प्रदर्शन किस तरह यह है को देखने के लिए नहीं होना चाहिए पेज के साथ छवियों को लोड करने और उन्हें छिपाने की तुलना में।

Answer 1

आप आमतौर पर छवियों को लोड करने के लिए ब्राउज़र कैश पर भरोसा कर सकते हैं। एक बहुत ही भरोसेमंद तरीका है कि मैं यह कर पाया है निम्नलिखित के साथ है:

$("<img>").attr('src', imageSrc); 

यह एक छवि तत्व बनाता है, डोम से संलग्न नहीं है, लेकिन ब्राउज़र अभी भी छवि डाउनलोड करने और यह कैश होगा । इसके साथ, आप या तो छवि तत्व को जोड़ सकते हैं या उस छवि स्रोत के साथ एक नया छवि तत्व उपयोग कर सकते हैं और लोड विलंब नहीं होना चाहिए।

मुझे यकीन नहीं है कि AJAX के साथ लोड करके आपका क्या मतलब है। चूंकि AJAX अनुरोध किसी अन्य अनुरोध से अलग नहीं है, इसलिए "AJAX" और "बस लोडिंग" छवियों के बीच प्रदर्शन अंतर नहीं होना चाहिए। यदि आप छवि को किसी भी तरीके से लोड करने के लिए स्क्रिप्ट का उपयोग कर रहे हैं तो सर्वर पर कुछ ओवरहेड हो सकता है।

Answer 2

मैं पहले से ही इस स्थिति है, जिसमें मैं भी बुनियादी छवि [थंबनेल छवि] लोड हो रहा है आप पेज

के लिए आलसी लोड का उपयोग कर सकते के लिए और लोड करने के लिए ले लिया है है है दोनों नमूना समाधान खोजने के

मूल रूप से बड़ी या मुख्य छवि आप उसमें थंबनेल छवि लोड कर सकते हैं और इसके बाद आप इसमें बड़ी छवि लोड करने के लिए कोड लिख सकते हैं।

$('#GalleryImage img.mainImage').load(function() { 
    $(this).attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

यह आप

Answer 3

अंत में मदद मिलेगी मई,, एचटीएमएल पार्स समय में लोड हो रहा है जावास्क्रिप्ट/jQuery का उपयोग कर पहले से लोड होने या ajax का उपयोग कर एक ही समय लगता है, खासकर अगर छवि बड़ी है (अगर यह नहीं था, आप नहीं पूछेंगे?)।

सिस्टम को कनेक्शन खोलना है, फ़ाइल के लिए एक GET अनुरोध करना है, और फ़ाइल नेटवर्क पर प्रसारित की जाती है। यदि यह कैश किया गया है तो इसे पुनः प्रेषित नहीं किया जाता है। नेटवर्क स्थानांतरण बाधा है, और विभिन्न लोड विधियां इसे बदलती नहीं हैं।

आप दो तरह से अपने उपयोगकर्ता की प्रतीक्षा बार को प्रभावित करेंगे:

• अपने मीडिया, उदा का आकार कम करें थंबनेल का उपयोग करें, संपीड़न के साथ चालाक बनें, बड़ी फाइलों का पुन: उपयोग करें ताकि आप कैशिंग का फायदा उठा सकें ...

• अपनी छवि लोड सावधानी से करें, जो छवि प्रीलोडिंग (AJAX के साथ या बिना, यह वही बात है) करता है। यह संभावना है कि यह जानना असंभव है कि छवि को लोड करना कब शुरू करना है ताकि उपयोगकर्ता प्रतीक्षा न करे। जैसा कि आप प्रस्तावित करते हैं, तीन छवियों को आगे लोड करना, मुझे ठीक लगता है। उपयोगकर्ता, कभी-कभी प्रतीक्षा कर सकते हैं, लेकिन अधिक अधिक है।

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

मैंने आपको वास्तव में जादू बुलेट नहीं दिया है ... कोई नहीं है, लेकिन मुझे उम्मीद है कि इससे मदद मिलती है।