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

Я хочу создать простой бит 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.

Ответы

Ответ 1

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

px предназначен только для CSS. Используйте либо:

oImg.width = '1';

чтобы установить ширину через HTML, или:

oImg.style.width = '1px';

чтобы установить его через CSS.

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

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

Ответ 2

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

Ответ 3

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"
}));

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

Можно ли использовать фреймворк? jQuery и Prototype сделать такую ​​вещь довольно легко. Здесь образец в Prototype:

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

Ответ 7

Самый короткий путь:

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

Ответ 8

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

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

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

Простой:)

Ответ 9

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

Ответ 10

Просто добавьте полный пример Jtml 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>