Який найкращий код 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/Хунгарський_нотація

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

Для цього непомітно, але все-таки зображення фактично завантажується у всіх веб-переглядачах, ви можете вставити абсолютно розміщену сторінку <div>як першу дитину тіла та помістити будь-які відстежуючі / попередньо завантажені зображення, які ви не хочете, щоб вони були видні там .

— бобінець
джерело

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

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

— Дарріл Хайн
джерело

24

Він спеціально не вимагав jQuery.

— Алекс

2

Також розбір тексту на код - безглуздий, неефективний і просто лінивий. Хто читає це, уникайте цього робити. Я маю на увазі, якщо ви вставляєте літерал <img ... />у DOM, то зробіть це з InternalHTML . Я просто не розумію цього: /

— 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 взагалі буде отримано (залежно від браузера).

— bobince

1

хтось має випадки, коли браузери не отримують це зображення, якщо його не додають до DOM?

— antoine129

2

Я тестую це в IE, FF, Chrome і Safari - усі завантажують зображення, не додаючи його до DOM. Це проблема зі старими браузерами?

— Сенонімічний

3

Чи дозволено вам використовувати рамку? jQuery і 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>

— Гвс Ахіл
джерело