लोड की गई कई छवियों की जांच

Question

मैं html5 की कैनवास सुविधा का उपयोग कर रहा हूं। मेरे पास कैनवास पर आकर्षित करने के लिए कुछ छवियां हैं और मुझे यह जांचने की ज़रूरत है कि इससे पहले कि वे उनका उपयोग कर सकें, वे सभी लोड हो गए हैं।

मैंने उन्हें एक सरणी के अंदर घोषित कर दिया है, मुझे जांच करने का एक तरीका चाहिए कि वे सभी एक ही समय में लोड हो गए हैं लेकिन मुझे यकीन नहीं है कि यह कैसे करें।

यहाँ मेरी कोड है:

var color = new Array(); 
color[0] = new Image(); 
color[0].src = "green.png"; 
color[1] = new Image(); 
color[1].src = "blue.png"; 

वर्तमान में यदि छवियों लोड किया है, मैं इतना की तरह एक के बाद यह एक करने के लिए होता है की जाँच करने के

:

color[0].onload = function(){ 
//code here 
} 
color[1].onload = function(){ 
//code here 
} 

अगर मैं एक बहुत अधिक था छवियों, जो बाद में मैं विकास में होगा, यह उन सभी की जांच करने का एक वास्तव में अक्षम तरीका होगा।

मैं उन्हें एक ही समय में कैसे देखूं?

Answer 1

यह करने के लिए एक hackish तरीका एक और फ़ाइल में जे एस आदेश जोड़ सकते हैं और पाद लेख में यह जगह है। इस तरह यह आखिरी लोड करता है।

हालांकि, jQuery (दस्तावेज़) का उपयोग कर .ready भी देशी विंडो से बेहतर काम करता है।

आप क्रोम का उपयोग कर रहे हैं आप नहीं हैं?

Answer 2

जो जब सभी छवियों/फ्रेम और बाह्य संसाधनों लोड किए गए हैं आग का प्रयोग करें window.onload: क्योंकि समय से

window.onload = function(){ 
    // your code here........ 
}; 

तो, आप सुरक्षित रूप से window.onload में अपनी छवि से संबंधित कोड डाल सकते हैं सभी छवियों पहले ही लोड हो चुका है

More information here.

Answer 3

क्या आप बस एक लूप का उपयोग नहीं कर सकते हैं और एक ही फ़ंक्शन को सभी ऑनलोड पर असाइन नहीं कर सकते?

var myImages = ["green.png", "blue.png"]; 

(function() { 
    var imageCount = myImages.length; 
    var loadedCount = 0, errorCount = 0; 

    var checkAllLoaded = function() { 
    if (loadedCount + errorCount == imageCount) { 
     // do what you need to do. 
    } 
    }; 

    var onload = function() { 
    loadedCount++; 
    checkAllLoaded(); 
    }, onerror = function() { 
    errorCount++; 
    checkAllLoaded(); 
    }; 

    for (var i = 0; i < imageCount; i++) { 
    var img = new Image(); 
    img.onload = onload; 
    img.onerror = onerror; 
    img.src = myImages[i]; 
    } 
})(); 

Answer 4

आप जब सभी छवियों को लोड किया जाता है एक समारोह कॉल करने के लिए चाहते हैं, तो आप यह कर सकते, यह मेरे

var imageCount = images.length; 
var imagesLoaded = 0; 

for(var i=0; i<imageCount; i++){ 
    images[i].onload = function(){ 
     imagesLoaded++; 
     if(imagesLoaded == imageCount){ 
      allLoaded(); 
     } 
    } 
} 

function allLoaded(){ 
    drawImages(); 
}