Что лучший код JavaScript должен создать img элемент
8 ответов
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).
, Чтобы сделать это невидимо, но все еще иметь изображение на самом деле загружается во всех браузерах, Вы могли вставить absolutely-positioned-off-the-page <div> как первый ребенок тела и поместить любые изображения отслеживания/предварительной нагрузки, Вы не хотите быть видимыми там.
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);
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"
}));
Только ради полноты, я предложил бы использовать InnerHTML путь также - даже при том, что я не назову его лучшим способом...
document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";
Между прочим, innerHTML не это плохо
Самый короткий путь:
(new Image()).src = "http:/track.me/image.gif";
Вам разрешают использовать платформу? jQuery и Прототип делают этот вид вещи довольно легким. Вот образец в Прототипе:
var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);
Как другие указали, разрешают ли Вам использовать платформу как jQuery, лучшая вещь сделать использовать его, поскольку он высоко, вероятно, сделает это самым лучшим способом. Если Нельзя использовать платформу тогда, я предполагаю, что управление DOM является лучшим способом сделать это (и по-моему, правильный способ сделать это).