Какой код 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.
@steveniseki он использовал en.wikipedia.org/wiki/Hungarian_notation
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
var img = new Image(1,1); // width, height values are optional params
img.src = 'http://www.testtrackinglink.com';
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
@AndreiCristianProdan Используйте console.info между каждой парой строк, чтобы вы точно знали, в какой строке он замораживается.
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"
}));
Он специально не просил jQuery.
Кроме того, разбор текста в код бессмыслен, неэффективен и просто ленив. Кто бы это ни читал, не делайте так. Я имею в виду, если вы вставляете буквальный <img ... /> в DOM, тогда сделайте это с помощью innerHTML. Я просто не понимаю этого: /
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> с абсолютным позиционированием вне страницы в качестве первого дочернего элемента тела и поместить любые изображения для отслеживания / предварительной загрузки, в которых вы не хотите быть видимыми. там.
Разве только new Image() не будет работать лучше всего при любых обстоятельствах?
Кратчайший путь:
(new Image()).src = "http:/track.me/image.gif";
Если он не добавлен в документ, нет уверенности, что изображение src будет извлечено вообще (зависит от браузера).
Есть ли у кого-нибудь случаи, когда браузеры не загружают это изображение, если оно не прикреплено к DOM?
Я тестировал это в IE, FF, Chrome и Safari - все изображения загружают без добавления в DOM. Это проблема старых браузеров?
Как отмечали другие, если вам разрешено использовать фреймворк, такой как jQuery, лучше всего использовать его, поскольку он, скорее всего, сделает это наилучшим образом. Если вам не разрешено использовать фреймворк, я думаю, что манипулирование DOM - лучший способ сделать это (и, на мой взгляд, правильный способ сделать это).
Для полноты картины я бы также предложил использовать способ InnerHTML - хотя я бы не назвал его лучшим способом ...
document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";
Кстати, innerHTML не так уж и плох
Я использовал этот метод для сетки изображений 50x50. Когда я попробовал описанный выше метод добавления, время выполнения подскочило со 150 мс до 2250 мс. Поэтому я думаю, что innerHTML намного эффективнее.
вы могли бы просто сделать:
var newImage = new Image();
newImage.src = "someImg.jpg";
if (document.images)
{
document.images.yourImageElementName.src = newImage.src;
}
Простой :)
Просто чтобы добавить полный пример 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>
Это метод, которым я следую, чтобы создать цикл тегов 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>
Определите «лучший». Самый быстрый? Самый простой?