Какой код JavaScript лучше всего подходит для создания элемента 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.

javascript dhtml

— Пит
источник

2

Дайте определение «лучший». Самый быстрый? Самый простой?

— Эндрю Хеджес,

1

@steveniseki он использовал en.wikipedia.org/wiki/Hungarian_notation

— Ииридайн

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

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

— бобинс
источник

4

Разве не new Image()сработает лучше при любых обстоятельствах?

— Alexis Wilke

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 ничего не ускользнет (что должно быть сделано в приведенном выше коде, если значения не были жестко закодированы). Также легче читать (с точки зрения JS):

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

— Дэррил Хайн
источник

24

Он специально не просил jQuery.

— Alex

2

Кроме того, разбор текста в код бессмыслен, неэффективен и просто ленив. Кто бы это ни читал, не делайте так. Я имею в виду, что если вы вставляете литерал <img ... />в DOM, тогда сделайте это с помощью innerHTML . Я просто не понимаю этого: /

— aexl

7

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

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

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

— Бинни В.А.
источник

2

Я использовал этот метод для сетки изображений 50x50. Когда я попробовал описанный выше метод добавления, время выполнения подскочило со 150 мс до 2250 мс. Поэтому я думаю, что innerHTML намного эффективнее.

— Николас

4

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

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

— Aemkei
источник

2

Если он не добавлен в документ, нет уверенности, что изображение src будет извлечено вообще (зависит от браузера).

— bob с

1

Есть ли у кого-нибудь случаи, когда браузеры не загружают это изображение, если оно не прикреплено к DOM?

— antoine129

2

Я тестировал это в IE, FF, Chrome и Safari - все загружали изображение без добавления его в DOM. Это проблема старых браузеров?

— Seanonymous

3

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

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

— Вайбс
источник

0

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

— Леандро Лопес
источник

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>

— Гвс Ахил
источник