type - ¿Cuál es el mejor código JavaScript para crear un elemento img?
script type= text/javascript src= (11)
¿Se te permite usar un marco? jQuery y Prototype hacen que este tipo de cosas sea bastante fácil. Aquí hay una muestra en Prototipo:
var elem = new Element(''img'', { ''class'': ''foo'', src: ''pic.jpg'', alt: ''alternate text'' });
$(document).insert(elem);
Quiero crear un pequeño código JS que cree un elemento de imagen en el fondo y no muestre nada. El elemento de imagen llamará a una URL de seguimiento (como Omniture) y debe ser simple y robusto, y funcionar en IE 6 = <únicamente. Aquí está el código que tengo:
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);
¿Es esta la forma más simple pero más robusta (sin errores) de hacerlo?
No puedo usar un framework como jQuery. Debe estar en JavaScript simple.
Como otros señalaron si se te permite usar un framework como jQuery, lo mejor es usarlo, ya que probablemente lo hará de la mejor manera posible. Si no puede usar un marco, entonces supongo que manipular el DOM es la mejor manera de hacerlo (y en mi opinión, la forma correcta de hacerlo).
Este es el método que sigo para crear un bucle de etiquetas img o una sola etiqueta como desee
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);
o
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>
La forma más corta:
(new Image()).src = "http:/track.me/image.gif";
Solo para agregar un ejemplo completo de 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>
Solo por el hecho de ser completo, sugeriría usar el modo InnerHTML también, aunque no lo llamaría de la mejor manera ...
document.getElementById("image-holder").innerHTML = "<img src=''image.png'' alt=''The Image'' />";
Por cierto, innerHTML no es tan malo
jQuery:
$(''#container'').append(''<img src="/path/to/image.jpg"
width="16" height="16" alt="Test Image" title="Test Image" />'');
Descubrí que esto funciona aún mejor porque no tiene que preocuparse de que HTML escape nada (lo que debería hacerse en el código anterior, si los valores no estaban codificados). También es más fácil de leer (desde una perspectiva JS):
$(''#container'').append($(''<img>'', {
src : "/path/to/image.jpg",
width : 16,
height : 16,
alt : "Test Image",
title : "Test Image"
}));
usted podría simplemente hacer:
var newImage = new Image();
newImage.src = "someImg.jpg";
if(document.images)
{
document.images.yourImageElementName.src = newImage.src;
}
Sencillo :)
oImg.setAttribute(''width'', ''1px'');
px es solo para CSS Utilizar cualquiera:
oImg.width = ''1'';
para establecer un ancho a través de HTML, o:
oImg.style.width = ''1px'';
para configurarlo a través de CSS.
Tenga en cuenta que las versiones antiguas de IE no crean una imagen adecuada con document.createElement() , y las versiones anteriores de KHTML no crean un nodo DOM apropiado con una new Image() , por lo que si desea ser totalmente compatible con versiones anteriores utilice algo me gusta:
// 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;
}
También tenga un poco de cuidado con document.body.appendChild si el script se puede ejecutar ya que la página está en el medio de la carga. Puede terminar con la imagen en un lugar inesperado o un extraño error de JavaScript en IE. Si necesita poder agregarlo en el momento de la carga (pero después de que el elemento <body> haya comenzado), puede intentar insertarlo al comienzo del cuerpo usando body.insertBefore(body.firstChild) .
Para hacer esto de forma invisible, pero la imagen realmente se carga en todos los navegadores, podría insertar un <div> completamente posicionado fuera de la página como el primer hijo del cuerpo y colocar cualquier imagen de seguimiento / carga previa que no desee que sea visible allí.
var img = document.createElement(''img'');
img.src = ''my_image.jpg'';
document.getElementById(''container'').appendChild(img);
var img = new Image(1,1); // width, height values are optional params
img.src = ''http://www.testtrackinglink.com'';