jQuery, जावास्क्रिप्ट, एचटीएमएल: बाकी सब कुछ लोड होने के बाद छवियों को कैसे लोड करें?

Question

हे दोस्तों, मेरे पास बहुत सी स्क्रिप्ट्स और एक लंबे समय तक लोडिंग समय के साथ एक बहुत ही जटिल पृष्ठ है। उस पृष्ठ के शीर्ष पर मैं jquery Nivo स्लाइडर (http://nivo.dev7studios.com/) को कार्यान्वित करना चाहता हूं।

प्रलेखन यह कहता है कि मैं एक div # स्लाइडर

<div id="slider"> 
    <img src="images/slide1.jpg" alt="" /> 
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> 
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> 
    <img src="images/slide4.jpg" alt="" /> 
</div> 

हालांकि मैं एक 1000x400px जो काफी बड़ा है के साथ 10 छवियों हो सकता है के अंदर स्लाइडर के लिए सभी छवियों को सूचीबद्ध करने के लिए है में

। पेज लोड होने पर वे छवियां लोड होंगी। चूंकि वे मेरे हेडर में हैं, इसलिए इसमें कुछ समय लग सकता है।

मैं किसी भी jquery स्लाइडर प्लगइन (जैसे nivo स्लाइडर) का उपयोग करने का कोई तरीका ढूंढ रहा हूं लेकिन या तो गतिशील रूप से छवियों को लोड या उन सभी छवियों को लोड करने के बाद मेरे पृष्ठ पर लोड हो गया है।

कोई विचार है कि मैं इसे कैसे हल कर सकता हूं?

पृष्ठ पर लोड होने के बाद भी जावास्क्रिप्ट प्रक्रिया शुरू करने का कोई तरीका है? यदि कोई तरीका है तो मुझे मेरी समस्या का समाधान हो सकता है (jquery AJAX लोड() विधि का उपयोग करके) ... हालांकि मुझे नहीं पता कि बाकी सब कुछ लोड करने के लिए कैसे इंतजार करना है और फिर स्लाइडर को सभी छवियों से शुरू करना है।

Answer 1

यहां हमने जो किया और यह बहुत अच्छा काम कर रहा है। हमने img की src विशेषता को छोड़ दिया और नकली विशेषता lsrc पर आईएमजी-स्थान जोड़ा। फिर हम lsrc मान के साथ गतिशील छवि लोड करते हैं, और लोड होने के बाद ही वास्तविक छवि के src सेट करते हैं।

यह तेज़ लोडिंग के बारे में नहीं है, लेकिन यह केवल छवियों को दिखाने के बारे में है जब यह आपके पृष्ठ पर पूरी तरह से डाउनलोड हो जाता है, ताकि उपयोगकर्ता को उस कष्टप्रद आधा लोड वाली छवियों को देखना न पड़े। वास्तविक छवियों को लोड होने पर प्लेसहोल्डर-छवि का उपयोग किया जा सकता है।

यहां कोड है।

$(function(){ 
    $.each(document.images, function(){ 
       var this_image = this; 
       var src = $(this_image).attr('src') || '' ; 
       if(!src.length > 0){ 
        //this_image.src = options.loading; // show loading 
        var lsrc = $(this_image).attr('lsrc') || '' ; 
        if(lsrc.length > 0){ 
         var img = new Image(); 
         img.src = lsrc; 
         $(img).load(function() { 
          this_image.src = this.src; 
         }); 
        } 
       } 
      }); 
    }); 

संपादित करें: छल src विशेषता निर्धारित करने में ही जब उस स्रोत अस्थायी img में लोड किया जाता है है।$(img).load(fn); इसे संभालता है।

Answer 2

jQuery जावास्क्रिप्ट को क्रियान्वित करने के लिए एक वाक्य रचना है के बाद दस्तावेज़ लोड होने के:

<script type="text/javascript"> 
jQuery(function(){ 

//your function implementation here... 

}); 
</script> 

Answer 3

check out jQuery लोड() घटना है, यह ग्राफिक्स सब कुछ शामिल है

$(window).load(function() { 
    // run code 
}); 

लोड पर आप तो लोड कर सकता है के लिए इंतजार कर रहा है छवियों का उपयोग:

var image = new Image(); 
image.src = "/path/to/huge/file.jpg"; 

आप एक फ़ंक्शन ऑनलोड जोड़ सकते हैं छवि के लिए भी

image.onload = function() { 
    ... 
} 

Answer 4

Xhalent के जवाब के अलावा, उन्हें डोम में जोड़ने के लिए jQuery में .append() फ़ंक्शन का उपयोग करें:

आपका HTML सिर्फ होगा:

<div id="slider"> 
</div> 

और फिर आपका jquery होगा:

jQuery(function(){ 
    $("#slider").append('<img src="images/slide1.jpg" alt="" />'); 
});