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

Question

मैं अपने होमपेज पर फोटो का एक सेट दिखाने के लिए उत्कृष्ट निवोस्लाइडर प्लगइन का उपयोग कर रहा हूं, वर्तमान में 5. सभी ठीक काम कर रहे हैं, लेकिन प्रत्येक तस्वीर पेज वजन के लिए लगभग 150K जोड़ती है। मैं वास्तव में लगभग 10 "स्लाइड" प्रदर्शित करना चाहता हूं, लेकिन चूंकि इन सभी छवियों को पृष्ठ के उद्घाटन पर पहले से लोड किया गया है, इसलिए पृष्ठ का वजन जल्द ही बड़ा हो जाएगा, खासकर जब से कई उपयोगकर्ता "शो" की प्रतीक्षा नहीं करेंगे खत्म करने के लिए।

मैं सोच रहा था कि प्रीलोड छवियों, या beter, केवल x छवियों के आगे संभव है। मुझे दस्तावेज़ में इसके बारे में कुछ भी नहीं मिला है, इसलिए मुझे लगता है कि यह मूल रूप से समर्थित नहीं है। कोई विचार?

Answer 1

मैं एक ऐसी ही समाधान के लिए देख रहा हूँ। मेरे पास एक ऐसी वेबसाइट पर एक छवि गैलरी है जो एक स्लाइड शो प्लगइन का उपयोग कर होम पेज पर एक दर्जन उच्च गुणवत्ता वाली छवियों को लोड करती है। और इन सभी छवियों को पृष्ठ वजन में 2-3 मेग्स जोड़ने पर लोड किया जा रहा है। कोई पाँसा नहीं।

निवो ब्राउज़र को संभालने वाली छवि को छोड़ देता है। यह <img src="..."> टैग पढ़ता है और फिर छवियों को स्लिम संक्रमण प्रभावों के साथ एक स्लाइड शो में जोड़ता है। छवियों के लोडिंग या प्रीलोडिंग को नियंत्रित करने के लिए कोड में कुछ भी नहीं है।

सौभाग्य से निवो गितूब पर है।

https://github.com/leepowers/Nivo-Slider

उपयोग एक ही है: तो मैं छवियों के आलसी लोड हो रहा है समर्थन करने के लिए यह काँटेदार। HTML के लिए एक छोटा सा परिवर्तन

<div id="slider"> 
<img src="my-large-image.jpg" alt=""> 
<img src="my-large-image2.jpg" alt=""> 
<img src="another-biggun.jpg" alt=""> 
</div> 

बदलें छवि data-src विशेषताओं के src विशेषताओं के साथ:

<div id="slider"> 
<img data-src="my-large-image.jpg" alt=""> 
<img data-src="my-large-image2.jpg" alt=""> 
<img data-src="another-biggun.jpg" alt=""> 
</div> 

data-src के बाद से पार्स नहीं है छवियों को लोड नहीं कर रहे हैं जब तक Nivo उन्हें इस्तेमाल करने के लिए तैयार है। data-src पर src से अधिक प्राथमिकता है जिसका अर्थ है कि आप गैर-जावास्क्रिप्ट उपयोगकर्ताओं के लिए src में निम्न-रेज संस्करण निर्दिष्ट कर सकते हैं, या src को स्पेसर छवि के साथ पॉप्युलेट कर सकते हैं ताकि HTML एक वैधकर्ता पास कर सके।

इसे देखें! मैं इसे कई परियोजनाओं पर लागू कर रहा हूं। एक डेमो यहां उपलब्ध है: http://powers1.net/files/nivo/demo/demo-lazy.html

Answer 2

पृष्ठ लोड होने तक आप #slider छुपा सकते हैं और फिर div लोड कर सकते हैं।

1. संलग्न display:none; अपने सीएसएस फ़ाइल में #slider करने के लिए।

2. अपने मौजूदा कोड के साथ अपनी $(window).load(function() {..}); में $('#slider').css('display','block'); जोड़ें, ताकि हो जाता है:

   $(window).load(function() { 
       $('#slider').css('display','block'); 
   }); 
   

Answer 3

आप एक सरणी में छवियों डाल दिया और पहले से लोड करने के लिए एक समारोह बना सकते हैं

jQuery.preloadImages = function() { 
for(var i = 0; i<arguments.length; i++) 
{ 
     jQuery("<img>").attr("src", arguments[i]); 
} 

}

और फ़ंक्शन का उपयोग करने के लिए, प्रदान करें छवि यूआरएल की एक सरणी:

$.preloadImages("test.png", "/imageUrl"); 

Answer 4

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

Nivoslider update or restart or even destroy

Answer 5

Nivo स्लाइडर एक छवि preloader जरूरत नहीं है। यदि आप jQuery लोड इवेंट (जैसे nivo के डेमो में) के साथ अपने स्लाइडर का उपयोग कर रहे हैं, तो nivo स्लाइडर पृष्ठ में लोड की गई सभी छवियों तक प्रतीक्षा करेगा।

$(window).load(function() { 
     $('#slider').nivoSlider(); 
}); 

यदि आप लोड की गई सभी छवियों तक प्रतीक्षा नहीं करना चाहते हैं तो आप नीचे दिए गए दस्तावेज़ तैयार ईवेंट को पसंद कर सकते हैं। कोई छवि प्रीलोड नहीं की जाएगी।

$(document).ready(function() { 
    $('#slider').nivoSlider(); 
}); 

यदि आप नियंत्रित प्रीलोडिंग चाहते हैं; आप jQuery की छवि प्रीलोड प्लगइन्स में से एक का उपयोग कर सकते हैं; http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() { 
    $('#slider').nivoSlider(); 
    //Before starting the slider preload your images then start your slider. 
    $.imgpreload(['/images/a.gif','/images/b.gif'], 
    { 
    all: function() 
    { 
     //Start slider here 
    } 
    }); 
}); 

Answer 6

बुरक का जवाब मेरे लिए ठीक है, लेकिन यह सफारी में काम नहीं करता है। मैं संशोधित करने की कोशिश की और यह मेरा समाधान है:

$(window).ready(function() { 
    $('#slider').nivoSlider(); 

यह सफारी, IE और Firefox में ठीक से काम करता है। बेशक, आप नियंत्रित प्रीलोड जोड़ सकते हैं।