Sin más preámbulos, solo mira el ejemplo
En primer lugar, la forma de escribir marcas de imágenes
<img data-src = "/image/image.jpg">
Debe colocar la dirección de la imagen en el atributo data-src , y no es necesario src , por lo que puede eliminar directamente src .
Código CSS
Para todas las imágenes con el atributo data-src , inicialmente mostraremos el estado como invisible, ajustándolo a través de la transparencia:
img {opacidad: 1; Transición: opacidad 0.3s;} img [data-src] {opacidad: 0;}¿Cuál es el propósito de escribir de esta manera? Cuando se carga la imagen, podrá ver el efecto.
Código JavaScript
Eventualmente eliminaremos data-src y lo reemplazaremos con el atributo SRC, pero esta es la acción después de que la imagen se cargue correctamente:
[] .forach.call (document.querySelectorAll ('img [data-src]'), function (img) {img.setTtribute ('src', img.getattribute ('data-src')); img.onload = function () {img.removeattribute ('data-src');};});En comparación con otras tecnologías de carga de retraso de imagen, este método es muy simple. No requiere casi otras condiciones y se puede usar en cualquier lugar. Es muy flexible de usar.
Pero debe tenerse en cuenta que la simplicidad tiene lo mejor o malo, y también será insuficiente debido a la simplicidad. No tiene la función de desplazar las imágenes a la ventana visual y luego cargarlas. Qué tecnología usar al final depende del escenario.
Lo anterior se trata de este artículo, espero que sea útil para el trabajo y el estudio de todos.