1. Introducción de fondo
En la aplicación del álbum de fotos en línea, la más simple necesidad de los usuarios de ver fotos. Cuando la red es más lenta, el tiempo de espera para ver fotos es relativamente largo y la experiencia del usuario será muy pobre.
2. Situación actual
Hay dos formas principales de cargar fotos:
(1) La forma más original de cargar y mostrar fotos directamente en la página HTML con la etiqueta IMG. Este método tendrá un proceso de espera en blanco cuando la velocidad de la red sea lenta o las fotos que se muestran son relativamente grandes, y la experiencia del usuario será pobre.
(2) Primero use la etiqueta IMG para cargar la miniatura de la foto para mostrar la foto en la página HTML, y luego use JavaScript para cargar la imagen original de la foto oculta, y espere hasta que la imagen grande de la foto se cargue antes de mostrar la imagen original en la página. El siguiente es el diagrama de flujo:
3. Nuestra solución
Algunos de los métodos de optimización hechos recientemente por QQ Photo Álbum han resuelto las deficiencias de los dos métodos de atractivo y han cumplido con las necesidades de los usuarios para ver las fotos: vea la situación general de las fotos lo antes posible y vea la imagen original clara lo más rápido posible. Este método utiliza miniaturas e imágenes originales para cargar y superponer la pantalla simultáneamente. Primero, cargue las miniaturas y expanda la pantalla, y la imagen grande se superpone en las miniaturas y cargas simultáneamente. La miniatura es muy pequeña y generalmente permite a los usuarios ver rápidamente la imagen borrosa. Durante la carga de la imagen grande, la miniatura se cubre gradualmente de arriba a abajo, para que el usuario pueda ver la imagen grande durante el proceso de carga.
(1) Diagrama de ejemplo
Como se muestra arriba, los pasos de procesamiento de este método son:
1). Obtenga la URL de la miniatura fotográfica y la imagen original, y obtenga la longitud y el ancho de la foto;
2). Cargue y muestre las miniaturas fotográficas y estire las miniaturas de acuerdo con la longitud y el ancho de la película. En este momento, el usuario ve un efecto borroso;
3). Cargue y muestre la foto original, superponga la imagen original en la miniatura para mostrarla. La imagen original se mostrará tanto como se carga. Si no está cargado, aún mostrará la miniatura. Gradualmente sobrescribe la miniatura. Durante el proceso de carga de la imagen original, el usuario ve el efecto de gradiente de la foto de desenfoque a claro.
4). Después de cargar la imagen original, la imagen original ha sobrescribido las miniaturas, y el usuario ve la imagen original real. En este momento, puede ocultar las miniaturas para evitar que las miniaturas interfieran con la visualización de imágenes con efectos transparentes como PNG o GIF.
(2) Código de muestra
<
Lo anterior es todo el contenido de este artículo. Para obtener más información sobre JavaScript, puede consultar: "Tutorial de referencia de JavaScript" y "Guía de estilo de código JavaScript". También espero que todos apoyen más a Wulin.com.