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

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

98 голосов
/ 22 октября 2008

Я хочу создать простой фрагмент кода JS, который создает элемент изображения в фоновом режиме и ничего не отображает. Элемент image будет вызывать URL отслеживания (например, Omniture) и должен быть простым и надежным и работать только в IE 6 = <. Вот код, который у меня есть: </p> 

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.

Ответы [ 11 ]

74 голосов
/ 22 октября 2008 
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> как первый дочерний элемент тела и поместить любые изображения отслеживания / предварительной загрузки, которые вы не делаете хочу быть там видимым.

49 голосов
/ 22 октября 2008 
var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';
15 голосов
/ 22 октября 2008 
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
12 голосов
/ 22 октября 2008

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"
}));
7 голосов
/ 23 октября 2008

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

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

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

4 голосов
/ 23 октября 2008

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

(new Image()).src = "http:/track.me/image.gif";
3 голосов
/ 15 октября 2011

Вы могли бы просто сделать: 

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

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

Простой:)

3 голосов
/ 22 октября 2008

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

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);
2 голосов
/ 22 октября 2016

Просто чтобы добавить полный пример 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 голосов
/ 26 апреля 2018

Это метод, которым я следую, чтобы создать цикл тегов 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>
Страница:
...