जावास्क्रिप्ट: किसी फ़ोल्डर में सभी छवियों को कैसे लोड करें?

Question

var img = new Image(); 
img.src = "images/myFolder/myImage.png"; 

उपरोक्त केवल myImage.png लोड करेगा। MyFolder की सभी छवियों को कैसे लोड करें?

Answer 1

जावास्क्रिप्ट सीधे फ़ाइल सिस्टम की सामग्री तक नहीं पहुंच सकता है। आपको सर्वर-साइड स्क्रिप्ट (PHP में लिखा गया आदि) का उपयोग करके सामग्री को पास करना होगा।

फिर एक बार आपके पास ऐसा करने के बाद, आप अलग-अलग लोड करने के लिए अपनी जावास्क्रिप्ट में एक लूप का उपयोग कर सकते हैं।

Answer 2

आपको उस फ़ोल्डर में फ़ाइलों की सूची प्राप्त करने के लिए कुछ तरीका चाहिए। इसे या तो मैन्युअल रूप से सरणी के रूप में परिभाषित किया जा सकता है, या किसी सर्वर-साइड स्क्रिप्ट के लिए AJAX अनुरोध द्वारा पुनर्प्राप्त किया जा सकता है जो आपके लिए फ़ाइलों को सूचीबद्ध करता है। किसी भी तरह से, फ़ोल्डर में सभी छवियों को प्राप्त करने के लिए कोई "जादू" विधि नहीं है।

Answer 3

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

Answer 4

अगर आपकी चित्र नाम अनुक्रमिक की तरह अपने कहा, तुम अगर छवि मौजूद है, नाम के लिए एक पाश बना सकते हैं हर यात्रा पर जाँच कर रहे हैं - और अगर यह नहीं करता है - पाश को तोड़ने:

var bCheckEnabled = true; 
var bFinishCheck = false; 

var img; 
var imgArray = new Array(); 
var i = 0; 

var myInterval = setInterval(loadImage, 1); 

function loadImage() { 

    if (bFinishCheck) { 
     clearInterval(myInterval); 
     alert('Loaded ' + i + ' image(s)!)'); 
     return; 
    } 

    if (bCheckEnabled) { 

     bCheckEnabled = false; 

     img = new Image(); 
     img.onload = fExists; 
     img.onerror = fDoesntExist; 
     img.src = 'images/myFolder/' + i + '.png'; 

    } 

} 

function fExists() { 
    imgArray.push(img); 
    i++; 
    bCheckEnabled = true; 
} 

function fDoesntExist() { 
    bFinishCheck = true; 
}