URL की सरणी से दस्तावेज़ में छवियों की एक सूची कैसे जोड़ें?

Question

मान लीजिए मैं एक सरणी छवि स्रोत URL की संपूर्ण, की तरह है:

var imgs = ['http://lorempizza.com/380/240', 
      'http://dummyimage.com/250/ffffff/000000', 
      'http://lorempixel.com/g/400/200/', 
      'http://lorempixel.com/g/400/200/sports/']; 

मैं उन छवियों के सभी कैसे आकर्षित करने और उन्हें एक विशेष स्थान पर मेरी पृष्ठ में सम्मिलित करते हैं? कहो ...

<div id="imageContainer"></div> 

Answer 1

एक तरीका यह है के लिए छवियों के अपने सरणी पर पाश के लिए है, प्रत्येक के लिए एक img तत्व बनाते हैं तो आपके सरणी में वर्तमान छवि स्रोत के लिए तत्व के स्रोत निर्धारित करते हैं, तो अपने से संलग्न कंटेनर। यह विचार करेंगे की तरह:

var imgs = ['http://lorempizza.com/380/240', 
      'http://dummyimage.com/250/ffffff/000000', 
      'http://lorempixel.com/g/400/200/', 
      'http://lorempixel.com/g/400/200/sports/']; 
var container = document.getElementById('imageContainer'); 

for (var i = 0, j = imgs.length; i < j; i++) { 
    var img = document.createElement('img'); 
    img.src = imgs[i]; // img[i] refers to the current URL. 
    container.appendChild(img); 
} 

बहरहाल, यह विशेष रूप से प्रभावी नहीं है:

• हम एक अनावश्यक पाश
• हम हर यात्रा
• पर डोम क्वेरी करने कर रहे हैं का उपयोग कर रहे हम वैश्विक i और j चर
• हम जावास्क्रिप्ट के अद्भुत ऐरे विधियों का उपयोग नहीं कर रहे हैं!

इसके बजाय, documentFragment और जावास्क्रिप्ट की forEach ऐरे विधि का उपयोग करें।

var imgs = ['http://lorempizza.com/380/240', 
      'http://dummyimage.com/250/ffffff/000000', 
      'http://lorempixel.com/g/400/200/', 
      'http://lorempixel.com/g/400/200/sports/']; 
var container = document.getElementById('imageContainer'); 
var docFrag = document.createDocumentFragment(); 

imgs.forEach(function(url, index, originalArray) { 
    var img = document.createElement('img'); 
    img.src = url; 
    docFrag.appendChild(img); 
}); 


container.appendChild(docFrag); 

यह जिस तरह से हम कर रहे हैं:

• केवल डोम मार एक बार
• शुरू नहीं वैश्विक चर
• कोड को पढ़ने के लिए क्लीनर को बनाए रखने, आसान!

तो बस सुनिश्चित करें कि आपके नए चित्र अच्छे लग रहे बनाने के लिए, मिश्रण करने के लिए सीएसएस का एक सा जोड़ें:

#imageContainer img { 
    width: 20%; 
    height: auto; 
} 

बैम! यहां एक fiddle

Answer 2

चूंकि एक अन्य उपहार प्रदान किया जाता है (और मुझे यह स्वीकार करना होगा कि मैं दूसरे उत्तर में कुछ तर्कों से पूरी तरह से सहमत नहीं हूं, जो कि हालांकि फैंसी का उपयोग करता है और यहां तक ​​कि कुछ हद तक 'भारी' आधुनिक तरीकों का उपयोग करता है) मुझे लगता है कि नील के मन में एक और स्पष्ट जवाब है, मैं इसमें एक शॉट करने जा रहा हूं।

दिमाग में आने वाली सबसे सीधी-आगे की बात (यह देखते हुए कि क्यू छवि के मार्कअप/विशेषताओं/आदि के लिए कोई आवश्यकता निर्धारित नहीं करता है) है: Array.prototype। join ([विभाजक = ',']) विधि जो एक स्ट्रिंग में किसी सरणी के सभी तत्वों में शामिल होती है, arguments[0] (उर्फ separator) के रूप में पारित की गई किसी भी चीज़ से अलग होती है, जो स्ट्रिंग (यदि आवश्यक हो) या पर डिफ़ॉल्ट होती है स्ट्रिंग ',' (अल्पविराम) छोड़े जाने पर।
_{join आईएनजी अक्सर तारों को संयोजित करने का एक बहुत ही लोकप्रिय तरीका था क्योंकि यह पुराने और/या कम 'लोकप्रिय'/'अनुकूलित' ब्राउज़र पर तेज़ी से होता था। बाद में अधिक लोकप्रिय और बेहतर अनुकूलित ब्राउज़र पर, + का उपयोग कर स्ट्रिंग-कॉन्सटेनेशन वर्तमान में तेज़ प्रतीत होता है (जो वास्तव में समझ में आता है)।हालांकि, कोड लिखते समय जो पीछे की तरफ संगत होने का इरादा रखता है, अक्सर कम से कम धीमी आम denominator चुनने/उपयोग करने के लिए समझ में आता है (क्योंकि गति-राक्षस पहले ही अनुकूलित हो चुके हैं)। उदाहरण के लिए उत्तर पर उत्तर (और जुड़ा हुआ jsperfs) this और this प्रश्न देखें।}

अब जब हम एक स्ट्रिंग है, हम इसे एक साथ प्रयोग करेंगे element.innerHTML जो createElement छवि के लिए डोम तक पहुँचने से often faster है के साथ और यह documentFragment के डोम के लिए अधिक से अधिक करने के लिए इन तत्वों जाने से पहले फिर से जोड़ने लेआउट में इच्छित पैरेंट तत्व ... _{मुझे गलत मत समझें, दस्तावेज़ फ्रेगमेंट एक अच्छी और उपयोगी बात है जब हमें बहुत सारे DOMwork को बिना लेआउट प्राप्त करने की आवश्यकता होती है- रेड्रो प्रत्येक के रास्ते में ऑपरेशन।}

var imgs = ['http://lorempizza.com/380/240', 
 
      'http://dummyimage.com/250/ffffff/000000', 
 
      'http://lorempixel.com/g/400/200/', 
 
      'http://lorempixel.com/g/400/200/sports/']; 
 

 
document.getElementById('imageContainer') 
 
     .innerHTML = '<img src="' + imgs.join('" /><img src="') + '" />';

<div id="imageContainer"></div>

इस के साथ एक छोटे से समस्या है: हम अगर हमारे img सरणी रिक्त है एक 'खाली' छवि मिलता है। कुछ भी नहीं कि एक साधारण if कठिन संभाल नहीं सकता .. चूंकि array.length 1-आधारित है, हम जावास्क्रिप्ट कॉरर्स की लंबाई 0 से false तक भी कर सकते हैं।
इसके अलावा हम बदल/एक गुमनाम को यह ब्लोट सकता है में (बेनाम) तुरंत लागू समारोह अभिव्यक्ति (IIFE):

(function(container, arr){ 
    if(arr.length) container.innerHTML = '<img src="' + arr.join('" /><img src="') + '" />'; 
}(document.getElementById('imageContainer') 
, imgs 
)); 

या यहां तक ​​कि आसपास के अनुगामी के लिए बहस और अग्रणी एचटीएमएल कोड को स्वीकार यूआरएल की:

(function(container, arr, leadStr, trailStr){ 
    if(arr.length) container.innerHTML = leadStr + arr.join(trailStr+leadStr) + trailStr; 
}(document.getElementById('imageContainer') 
, imgs 
, '<img src="' 
, '" />' 
)); 

आदि, आदि, आदि ...

वास्तविक (ब्राउज़र की) इंजन कार्यान्वयन (और अनुकूलन), यह अभी भी 'में शामिल होने' (सभी अन्य समाधान की तरह) सबसे शायद हा पर निर्भर करता है पृष्ठभूमि में सा पाश ..

forEach के बाद से आमतौर पर कुछ हद तक एक धीमी गति से विधि के रूप में देखा जाता है (जैसा कि हम सभी इस बात से सहमत है कि वहाँ अभी भी पृष्ठभूमि में एक पाश है), जो जाता है (हमेशा की तरह, इंजन के आधार पर) एक बहुत करने के लिए अधिक से अधिक काम की आवश्यकता हो सकती है और यह कॉलबैक सरणी में प्रत्येक तत्व के लिए एक फ़ंक्शन (कुछ (3) तर्कों के चारों ओर गुजर रहा है), मैं स्ट्रिंग-कॉन्सटेनेशन का उपयोग करके यहां एक लूप-संस्करण प्रस्तुत करूंगा (इस उत्तर में विविधता के लिए और 'आधुनिक' 'तेजी से' स्ट्रिंग-संयोजन):

(function(container, arr, leadStr, trailStr){ 
    var i=0, L=arr.length, r=''; 
    if(L){ 
    for(; i<L ; ++i){ 
     r += leadStr + arr[i] + trailStr; 
    } 
    container.innerHTML = r; 
    } 
}(document.getElementById('imageContainer') 
, imgs 
, '<img src="' 
, '" />' 
)); 

यह सब HTML4 और हिंदुस्तान टाइम्स का उपयोग कर किसी भी ब्राउज़र पर काम करना चाहिए ML5। यह भी ध्यान रखें कि उपर्युक्त 'कंटेनर' की सामग्री को ओवरराइट करेगा (इसमें शामिल नहीं है)।

डीओएम-विधियों को तकनीकी रूप से एक्स (एच) एमएल के लिए आवश्यक है क्योंकि तत्वों के पास innerHTML आधिकारिक तौर पर संपत्ति नहीं है (हालांकि बहुत से ब्राउज़र दिमाग में नहीं हैं), लेकिन हम अभी भी एक सरल (गैर -hidden) पाश वैश्विक विस्तार के लिए कुछ भी लीक करते हुए नहीं, बस ऊपर समारोह को संशोधित करके:

(function(container, arr){ 
    var i = 0, L = arr.length, docFrag = document.createDocumentFragment(); 
    if(L){ 
    for(; i<L; ++i){ 
     docFrag.appendChild(document.createElement('img')).src = arr[i]; 
    } 
    container.appendChild(docFrag); 
    } 
}(document.getElementById('imageContainer') 
, imgs 
)); 

ध्यान दें कि यह उदाहरण 'कंटेनर' में सामग्री के लिए कहते हैं।

इन उदाहरणों चीजों के एक जोड़े की रूपरेखा तैयार करने के उद्देश्य से कर रहे हैं: तुम क्या के आधार पर कुछ भी नहीं 'की बचत होती है' एक 'अनावश्यक' पाश (वास्तव में,: innerHTML, join, कोई वैश्विक/लीक चर और सबसे महत्वपूर्ण बात शुरू करने की जरूरत नहीं है कर रहे हैं, दृश्य लूप वास्तव में तेजी से हो सकता है)।

हालांकि, कोई भी रैपिंग फ़ंक्शंस (उपरोक्त उदाहरणों में आईआईएफई) का नाम दे सकता है और बस अपने आवश्यक तर्कों को पारित करके उन्हें कॉल कर सकता है। इस तरह आप अपने छवि-क्षेत्र को गतिशील रूप से जोड़ या अपडेट/ओवरराइट कर सकते हैं (जैसे कि जब आप अलग-अलग छवि-यूआरएल-सरणी को AJAX आदि पर लोड करेंगे ..) एक से अधिक बार।
क्रम कुछ लुकअप कम करने के लिए इस अंतिम उदाहरण मैं एक 'चतुर' रास्ते में cloneNode का उपयोग किया है (कि इच्छा जी जिप अच्छी तरह से) के लिए (जबकि एक बचे हुए है, लेकिन छिन्न-भिन्न छवि नोड के साथ हमें नहीं छोड़):

var imgs = ['http://lorempizza.com/380/240', 
 
      'http://dummyimage.com/250/ffffff/000000', 
 
      'http://lorempixel.com/g/400/200/', 
 
      'http://lorempixel.com/g/400/200/sports/']; 
 

 
function addPics(container, arr){ 
 
    var i = 0, L = arr.length, docFrag = document.createDocumentFragment(), img; 
 
    if(L){ 
 
    for(docFrag.appendChild(img=document.createElement('img')).src = arr[i] 
 
     ; ++i<L 
 
     ; docFrag.appendChild(img.cloneNode(false)).src = arr[i] 
 
     ); 
 
    container.appendChild(docFrag); 
 
    } 
 
} 
 

 
addPics(document.getElementById('imageContainer'), imgs);

<div id="imageContainer"></div>

उम्मीद है कि इन उदाहरणों के बीच स्पष्टीकरण क्या नील मन में था कर रहे हैं ..
किसी भी मामले में, वहाँ अब इस और अन्य जवाब (रों) के बीच पर्याप्त संदर्भ चारों ओर जाने के लिए होना चाहिए।