¿Cuáles son todas las diferencias entre los atributos src y data-src?

102

¿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?

html image Adam Pierzchała
fuente

Respuestas:

174

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).

Jukka K. Korpela
fuente
1
Angular.js también usa data-src para el enlace tardío de URL basadas en el modelo
Jeff
Gracias por la respuesta :) clara a punto de utilizar jQuery.lazy y no estaba seguro de lo que era con la del SCR
Timoteo
19

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>
jfriend00
fuente
4

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.

Tieson T.
fuente
3
@ AdamPierzchała La esencia es la misma: no hay "una o la otra" en esta pregunta; srcdebe incluirse. Utiliza data-atributos para agregar datos adicionales para que un lenguaje de secuencias de comandos (como JavaScript) aproveche.
Tieson T.
4

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.

ElomSkillupsoft
fuente