Img एलिमेंट बनाने के लिए सबसे अच्छा जावास्क्रिप्ट कोड क्या है

107

मैं एक सरल सा JS कोड बनाना चाहता हूं जो पृष्ठभूमि में एक छवि तत्व बनाता है और कुछ भी प्रदर्शित नहीं करता है। छवि तत्व एक ट्रैकिंग URL (जैसे Omniture) को कॉल करेगा और IE 6 = <केवल में सरल और मजबूत और काम करने की आवश्यकता है। यहाँ मेरे पास कोड है:

var oImg = document.createElement("img");
oImg.setAttribute('src', 'http://www.testtrackinglink.com');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);

क्या यह इसे करने का सबसे सरल लेकिन सबसे मजबूत (त्रुटि मुक्त) तरीका है?

मैं jQuery जैसे ढांचे का उपयोग नहीं कर सकता। यह सादे जावास्क्रिप्ट में होना चाहिए।

javascript dhtml

— पीट
स्रोत

2

परिभाषित करें "सर्वश्रेष्ठ।" सबसे तेजी से? सबसे आसान?

— एंड्रयू हेजेज

1

@steveniseki उन्होंने en.wikipedia.org/wiki/H के

— Iiridayn

82

oImg.setAttribute('width', '1px');

pxकेवल CSS के लिए है। या तो उपयोग करें:

oImg.width = '1';

HTML के माध्यम से एक चौड़ाई सेट करने के लिए, या:

oImg.style.width = '1px';

CSS के माध्यम से इसे सेट करने के लिए।

ध्यान दें कि IE के पुराने संस्करण के साथ एक उचित छवि नहीं बनाते हैं document.createElement(), और KHTML के पुराने संस्करणों के साथ एक उचित DOM नोड नहीं बनाते हैं new Image(), इसलिए यदि आप पूरी तरह से पीछे की ओर संगत होना चाहते हैं जैसे कि:

// IEWIN boolean previously sniffed through eg. conditional comments

function img_create(src, alt, title) {
    var img = IEWIN ? new Image() : document.createElement('img');
    img.src = src;
    if ( alt != null ) img.alt = alt;
    if ( title != null ) img.title = title;
    return img;
}

document.body.appendChildयदि स्क्रिप्ट लोडिंग के बीच में है, तो स्क्रिप्ट थोड़ा सा सावधान हो सकती है। आप एक अप्रत्याशित स्थान पर छवि, या IE पर एक अजीब जावास्क्रिप्ट त्रुटि के साथ समाप्त कर सकते हैं। यदि आपको इसे लोड-टाइम (लेकिन <body>तत्व शुरू होने के बाद ) में जोड़ने में सक्षम होने की आवश्यकता है , तो आप इसका उपयोग करके शरीर के प्रारंभ में सम्मिलित करने का प्रयास कर सकते हैं body.insertBefore(body.firstChild)।

यह अदृश्य रूप से करने के लिए, लेकिन अभी भी छवि वास्तव में सभी ब्राउज़रों में लोड है, आप <div>शरीर के पहले बच्चे के रूप में एक बिल्कुल-पोस्ट-ऑफ-द-पेज सम्मिलित कर सकते हैं और कोई भी ट्रैकिंग / प्रीलोड छवियों को डाल सकते हैं जो आप वहां दिखाई नहीं देना चाहते हैं ।

— bobince
स्रोत

4

सिर्फ new Image()सभी परिस्थितियों में सबसे अच्छा काम नहीं करेगा ?

— एलेक्सिस विलके

52

var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';

— बालक
स्रोत

19

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

— माइकल एल पेरी
स्रोत

@AndreiCristianProdan console.logप्रत्येक जोड़ी लाइनों के बीच का उपयोग करें , जिससे आपको पता चल जाएगा कि कौन सी रेखा इसे फ्रीज़ कर रही है।

— रॉड्रिगो

12

jQuery:

$('#container').append('<img src="/path/to/image.jpg"
       width="16" height="16" alt="Test Image" title="Test Image" />');

मैंने पाया है कि यह और भी बेहतर काम करता है क्योंकि आपको HTML से कुछ भी बचने के बारे में चिंता करने की ज़रूरत नहीं है (जो कि उपरोक्त कोड में किया जाना चाहिए, यदि मान हार्ड कोडित नहीं थे)। यह पढ़ना भी आसान है (जेएस के नजरिए से):

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));

— डेरिल हेन
स्रोत

24

उन्होंने विशेष रूप से jQuery का अनुरोध किया।

— एलेक्स

2

इसके अलावा, कोड में पार्सिंग पाठ व्यर्थ, अप्रभावी और सादा आलसी है। जो कोई भी इसे पढ़ता है, वह इसे करने से बचें। मेरा मतलब है, यदि आप <img ... />DOM में शाब्दिक रूप से सम्मिलित कर रहे हैं , तो इसे आंतरिक HTML के साथ करें । मुझे अभी यह नहीं मिला: /

— aexl

7

बस पूर्णता के लिए, मैं सुझाव देना चाहूंगा कि इनरएचटीएमएल तरीका भी इस्तेमाल करूं - हालांकि मैं इसे सबसे अच्छा तरीका नहीं कहूंगा ...

document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";

वैसे, इनरटीएमएल खराब नहीं है

— बिन्नी वीए
स्रोत

2

मैं छवियों के 50x50 ग्रिड के लिए इस पद्धति का उपयोग कर रहा था। जब मैंने उपरोक्त अपील पद्धति की कोशिश की, तो मेरा निष्पादन समय 150ms से 2250ms हो गया। तो मैं सोच रहा हूँ कि भीतर HTML अधिक कुशल है।

— निकोलस

4

सबसे छोटा तरीका:

(new Image()).src = "http:/track.me/image.gif";

— aemkei
स्रोत

2

यदि दस्तावेज़ में नहीं जोड़ा गया है, तो यह निश्चित नहीं है कि छवि src को सभी (ब्राउज़र-निर्भर) में लाया जाएगा।

— बॉबीस

1

क्या किसी के पास ब्राउज़र के मामले हैं जो उस छवि को प्राप्त नहीं कर रहा है यदि वह डोम से जुड़ा नहीं है?

— antoine129

2

मैंने IE, FF, Chrome और Safari में यह परीक्षण किया है - सभी ने DOM को संलग्न किए बिना छवि लोड की है। क्या यह पुराने ब्राउज़रों के साथ एक समस्या है?

— बेनामी

3

क्या आपको एक रूपरेखा का उपयोग करने की अनुमति है? jQuery और प्रोटोटाइप इस तरह की चीज़ को बहुत आसान बनाते हैं। यहाँ प्रोटोटाइप में एक नमूना है:

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);

— swilliams
स्रोत

3

आप बस कर सकते हैं:

var newImage = new Image();
newImage.src = "someImg.jpg";

if(document.images)
{
  document.images.yourImageElementName.src = newImage.src;
}

सरल :)

— नितिन बंसल
स्रोत

2

बस पूर्ण HTML जेएस उदाहरण जोड़ने के लिए

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create image demo</title>
    <script>


        function createImage() {
            var x = document.createElement("IMG");
            x.setAttribute("src", "http://www.iseebug.com/wp-content/uploads/2016/09/c2.png");
            x.setAttribute("height", "200");
            x.setAttribute("width", "400");
            x.setAttribute("alt", "suppp");
            document.getElementById("res").appendChild(x);
        }

    </script>
</head>
<body>
<button onclick="createImage()">ok</button>
<div id="res"></div>

</body>
</html>

— Vaibs
स्रोत

0

जैसा कि अन्य लोगों ने बताया है कि अगर आपको jQuery की तरह एक फ्रेमवर्क का उपयोग करने की अनुमति है, तो सबसे अच्छी बात यह है कि इसका उपयोग करें, क्योंकि यह उच्च संभावना सबसे अच्छे तरीके से करेगा। यदि आपको किसी फ्रेमवर्क का उपयोग करने की अनुमति नहीं है, तो मुझे लगता है कि डोम में हेरफेर यह करने का सबसे अच्छा तरीका है (और मेरी राय में, इसे करने का सही तरीका)।

— लिंड्रो लोपेज़
स्रोत

0

यह वह विधि है जिसका अनुसरण मैं img टैग्स का एक लूप बनाने के लिए करता हूं या उर इच्छा के रूप में एकल टैग करता हूं

method1 :
    let pics=document.getElementById("pics-thumbs");
            let divholder=document.createDocumentFragment();
            for(let i=1;i<73;i++)
            {
                let img=document.createElement("img");
                img.class="img-responsive";
                img.src=`images/fun${i}.jpg`;
                divholder.appendChild(img);
            }
            pics.appendChild(divholder);

या

method2: 
let pics = document.getElementById("pics-thumbs"),
  imgArr = [];
for (let i = 1; i < 73; i++) {

  imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')
<div id="pics-thumbs"></div>

— जीवीएस अखिल
स्रोत