Каков лучший код JavaScript для создания элемента img

Я хочу создать простой бит кода JS, который создает элемент изображения в фоновом режиме и ничего не отображает. Элемент image вызовет 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.

91
dhtml javascript

11 ответов

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 если скрипт может выполняться как страница находится в середине загрузки. Вы можете получить изображение в неожиданном месте или странную ошибку JavaScript в IE. Если вам нужно добавить его во время загрузки (но после <body> элемент запущен), вы можете попробовать вставить его в начале тела, используя body.insertBefore(body.firstChild).

чтобы сделать это незаметно, но все еще иметь изображение на самом деле загружается во всех браузерах, вы можете вставить абсолютно позиционированный-off-the-page <div> как первый ребенок тела и положить любой отслеживание / предварительная загрузка изображений, которые вы не хотите видеть там.

71
var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';
45
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
13

jQuery:

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

я обнаружил, что это работает еще лучше, потому что вам не нужно беспокоиться о том, что HTML избегает чего-либо (что должно быть сделано в приведенном выше коде, если значения не были жестко закодированы). Это также легче читать (с точки зрения JS):

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

просто для полноты, я бы предложил использовать путь InnerHTML, а также-хотя я бы не назвал его лучшим способом...

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

кстати, innerHTML не так уж плохо

7

разрешено ли вам использовать фреймворк? jQuery и прототип подобные вещи довольно легко. Вот образец в Prototype:

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

кратчайший путь: 

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

вы можете просто сделать:

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

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

просто :)

3

просто добавить полный пример html js

<!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>
1

как указывали другие, если вам разрешено использовать фреймворк, такой как jQuery, лучше всего использовать его, поскольку он, скорее всего, сделает это наилучшим образом. Если вам не разрешено использовать фреймворк, я думаю, что манипулирование DOM-лучший способ сделать это (и, на мой взгляд, правильный способ сделать это).

0

Это метод, которому я следую, чтобы создать цикл тегов img или один тег, как ur wish

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>
0