केवल उनकी पूरी लोड के बाद सभी चित्र दिखाएं

Question

में

<div id="all-images"> 
    <img src="images/1.jpg"> 
    <img src="images/2.jpg"> 
    <img src="images/3.jpg"> 
    <img src="images/4.jpg"> 
    <img src="images/5.jpg"> 
    <img src="images/6.jpg"> 
</div> 

मैं (JQuery) आईडी के सभी छवियाँ दिखाने के लिए = "सभी छवियों" केवल जब इस आईडी के अंदर सभी छवियों को पूरी तरह से लोड होगा चाहते हैं।

और सभी छवियों को लोड करने से पहले इस खंड "लोड हो रहा है .." से पता चलता पाठ

Answer 1

मानते हुए अपने div पूर्व छिपा हुआ है:

$("#loadingDiv").show(); 
var nImages = $("#all-images").length; 
var loadCounter = 0; 
//binds onload event listner to images 
$("#all-images img").on("load", function() { 
    loadCounter++; 
    if(nImages == loadCounter) { 
     $(this).parent().show(); 
     $("#loadingDiv").hide(); 
    } 
}).each(function() { 

    // attempt to defeat cases where load event does not fire 
    // on cached images 
    if(this.complete) $(this).trigger("load"); 
}); 

Answer 2

http://api.jquery.com/load-event/

के एक लोड ईवेंट हैंडलर संलग्न प्रयास करें अपने "सभी छवियों" div। यदि एपीआई भरोसा किया जाना है, तो सभी घटनाएं लोड होने पर वह ईवेंट ट्रिगर हो जाएगा।

तो मेरे पास कुछ प्रकार का दस्तावेज़ होगा। पहले से ही हैंडलर जो आपकी छवियों को छुपाएगा और "लोड हो रहा है ..." टेक्स्ट डालें, फिर आपका लोड इवेंट हैंडलर आपकी छवियां दिखाएगा और लोडिंग टेक्स्ट को हटा देगा।

उम्मीद है कि इससे मदद मिलती है।