¿Cuáles son las diferencias y consecuencias (buenas y malas) de utilizar cualquiera de los dos data-srco srcatributo de la imgetiqueta? ¿Puedo lograr los mismos resultados con ambos? Si es así, ¿cuándo se deben utilizar cada uno de ellos?
¿Cuáles son las diferencias y consecuencias (buenas y malas) de utilizar cualquiera de los dos data-srco srcatributo de la imgetiqueta? ¿Puedo lograr los mismos resultados con ambos? Si es así, ¿cuándo se deben utilizar cada uno de ellos?
Respuestas:
Los atributos srcy data-srcno tienen nada en común, excepto que ambos están permitidos por HTML5 CR y ambos contienen las letras src. Todo lo demás es diferente.
El srcatributo se define en las especificaciones HTML y tiene un significado funcional.
El data-srcatributo es solo uno del conjunto infinito de data-*atributos, que no tienen un significado definido, pero se pueden usar para incluir datos invisibles en un elemento, para usar en secuencias de comandos (o estilo).
Si desea que la imagen cargue y muestre una imagen en particular, utilice .srcpara cargar la URL de esa imagen.
Si desea un fragmento de metadatos (en cualquier etiqueta) que pueda contener una URL, utilice data-srco cualquiera data-xxxque desee seleccionar.
Documentación de MDN sobre atributos data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
Ejemplo de srcuna etiqueta de imagen donde la imagen carga el JPEG por usted y lo muestra:
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>
Ejemplo de 'data-src' en una etiqueta que no es de imagen donde la imagen aún no está cargada; es solo una pieza de metadatos en la etiqueta div:
<div id="myDiv" data-src="http://mydomain.com/foo.jpg">
<script>
// in all browsers
var imageUrl = document.getElementById("myDiv").getAttribute("data-src");
// or in modern browsers
var imageUrl = document.getElementById("myDiv").dataset.src;
</script>
Ejemplo de data-srcuna etiqueta de imagen utilizada como lugar para almacenar la URL de una imagen alternativa:
<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">
<script>
var item = document.getElementById("myImage");
// switch the image to the URL specified in data-src
item.src = item.dataset.src;
</script>
El primero <img />no es válido, srces un atributo obligatorio. data-srces un atributo que puede ser aprovechado por, digamos, JavaScript, pero no tiene un significado de presentación.
srcdebe incluirse. Utiliza data-atributos para agregar datos adicionales para que un lenguaje de secuencias de comandos (como JavaScript) aproveche.
El atributo data-src es parte de la colección de atributos data- * introducida en HTML5. data-src nos permite almacenar datos adicionales que no tienen ningún significado para el navegador, pero que pueden ser utilizados por el código Javascript o las reglas CSS.
Bueno, el atributo data src solo se usa para vincular datos, por ejemplo, ASP.NET ...