prefacio
Optimización! Está optimizado!
Los Cachorros estaban plan de recorte como un enlace a través de aplicaciones web, conectado al comportamiento del usuario y el rendimiento de la máquina. El 优化sentido último, es obtener un equilibrio óptimo entre los dos.
Para un recurso de imagen cargada, más aún. Hoy hablaremos de lo simple, el desarrollo común proyectar imágenes modo de optimización de la carga.
precarga
1. enmascarar Dafa
A menudo usamos jQuery, jQuery, en $(function){})realidad, DOMContentLoadedel evento se completa devolución de llamada, la construcción acaba de terminar de un árbol DOM. Css, como las descargas y la renderización de páginas dentro de imagen y otros recursos no están necesariamente terminado. Así que si esta vez la página se representa, la página va a ser muy feo.
Para resolver este problema, con el fin de mejorar la experiencia del usuario en términos de diseño y comportamiento, podemos antes de imágenes y otros recursos importantes descargado por completo, en la página y mucho más bella máscara y avisos pop-up informar al usuario de la carga de recursos es de carga. Espere hasta Imágenes completamente terminado de cargar, la máscara se eliminó y la animación de carga .
las ideas específicas de la implementación son los siguientes:
Después de $ (function () {}), además de las llamadas estallidos de animación de carga de hasta primera máscara se utiliza para indicar al usuario para la carga de
elementos IMG necesidad de pre-cargar la página de descarga
var img = new Image(); img.src="xx.jpg"Imágenes descarga se haya completado, habrá un proceso de carga de devolución de llamada
img.onload = function(){...}Retire la animación de carga en esta devolución de llamada y la máscara
Esto hará que la experiencia de funcionamiento suave y sedosa a los usuarios ya no tienen que preocuparse por los usuarios para ver quién es la descarga no muestra la imagen completa de la muerte fea.
Nuestro lema es: o bien no a usted, o le dan un aspecto en el mejor de
los escenarios: Utilice la "imagen actual de la primera animación de la pantalla, y su trasero o un diseñador de interfaz de usuario extremadamente fuerte" caso
2. yardas Dafa
Gong Dafa máscara de código y tienen ligeramente diferentes, ideas específicas de aplicación son los siguientes:
En primer lugar, es necesario preparar la imagen pre-cargado dos, uno es mínima definición clara. Por ejemplo, tamaño de girl_hd de 60 kb. Es otra niña, de 6 kb de tamaño.
página HTML requiere escrito pre-cargado imagen src dirección de etiqueta es la dirección de la liquidación baja
<img src="girl.jpg" class="hd-replace">Debido a la baja visión clara de la pequeña, cargada rápidamente.
Después de la (function () {}) $ llamada dirección, adquiere página de definición necesidad de reemplazar el img src (girl.jpg), obteniendo de este modo HD figura src como una concatenación de cadenas de referencia (+ '_ hd.jpg') (girl_hd. jpg), a continuación, descargar el mapa de alta definición
var img = new Image(); img.src=“girl_hd.jpg”Imágenes descarga se haya completado, habrá un proceso de carga de devolución de llamada
img.onload = function(){...}Devolución de llamada sustituir la página src img, por lo que ahora es la etiqueta de imagen en la página
<img src="girl_hd.jpg" class="hd-replace">
Nuestro lema es: no hay código para ver alta definición, ver por favor, si hay una baja código claro
escenarios de aplicación: Hacer que el caso "un gran número de imágenes de la primera pantalla, y el tamaño no es pequeño" en el uso
Lazy carga
Si usted lee cuidadosamente las ideas anteriores pre-cargado, asegúrese de ladrillo en la cabeza: enmascarar Dafa Hao, hay código de Dafa Hao, esto no mejora la velocidad de carga de proyecto ah, la última imagen descargada no es demasiado Descargar Sí, la carga diferida sólo cambia la experiencia operativa del usuario, de hecho, la velocidad de carga del proyecto no se ha incrementado, pero ahora la carga diferida decir, sino un proyecto real para mejorar la velocidad de carga de Oh.
¿Cuál es la carga diferida, en una palabra para explicar que 图片按需加载.
Hay que cepillar microblogging, microblogging es el mejor ejemplo de foto de la pared es cargado ligeramente. Foto muestra inicialmente no mucho, sólo los usuarios tire hacia abajo, tire de la posición inferior, foto de la pared se estirará, nuevas imágenes se carga.
pensamiento operativo:
Monitor de
滚动条scrolleventos (por supuesto,touchmovelos acontecimientos pueden ser)Cada vez que se activa un evento, determinar la posición de la pared foto actual
Si la pared foto se ha cepillado a un cierto punto crítico en la posición inferior
Js Descargar emergente imagen,
var img = new Image(); img.src="xx.jpg"Descargar la devolución de llamada completo de un proceso de carga
img.onload = function(){...}Insertar imágenes han sido descargadas a la página de descarga en la realización de la devolución de llamada
Por supuesto, dependiendo del proyecto, habrá una variedad de carga diferida pero el núcleo es el mismo: 即页面初始加载的时候，只加载满足用户需求的最小数量的资源. Tomar foto de la pared, por ejemplo, los usuarios podrían micro-blog, hay 500 fotos, cuando se carga una página si la carga 500, los usuarios estarán pegados a la explosión (como ha sido en la imagen de fondo el estado de descarga). Si la página se carga únicamente la carga inicial de 20 imágenes, otras imágenes por propia operación del usuario (scroll down), para ser cargado en la demanda, sería extremadamente mayor fluidez en marcha proyecto de actualización.
epílogo
Aunque pre-cargado o carga diferida El principio es muy simple, realmente me dio la inspiración es enorme:
预加载Además de mejorar la experiencia del usuario de operar su núcleo más profundo de que:对资源进行碎片化加载que la precarga en realidad puede ocurrir en cualquier momento en que el usuario no se movió el ratón durante mucho tiempo, puede secretamente he descargado dos imágenes? Cuando un gran número de usuarios Actualmente no hay operaciones aritméticas, puedo descargado en secreto dos imágenes? Cuando el usuario se encuentra actualmente en una pantalla de inicio de sesión muy simplificado, I Can secreto descargar un par de fotos consiguió un salto exitoso a la página? Etc., etc.懒加载Profundo-mentira fundamentales:按需a la carta palabra ha sido profundamente en mi mente ahora, en retrospectiva, muchas, muchas maneras que están optimizados en torno a la demanda de ampliar ..按需加载Js,按需加载图片Etc.
En primer lugar, hay que asegurarse primero de que el proyecto la velocidad de carga de tiempo, y permite a los usuarios ver el contenido de la página en el menor tiempo posible.
En segundo lugar, tratamos de asegurar que el grado de racionalización de la página actual, no hacen sentido carga sólo cuando el usuario necesita en realidad, hemos presentado a él.
Sus ventajas y desventajas que:
Precarga:
Ventajas: Si el avance es sólo grandes cuadros, hasta que la necesidad de utilizar esta imagen, se puede abrir en cuestión de segundos.
Contras: Fotos Tiempo de descarga afectará el tiempo de carga de la finalización del proyecto, el proyecto afectará el funcionamiento de la fluidez
Lazy carga es que:
Ventajas: garantizar que los usuarios carguen el proyecto es la más simple, el más rápido, menos los recursos descargados
Contras: Si una acción del usuario acciona la carga diferida, que tienen que esperar a que termine la descarga del recurso de tiempo y durante los recursos de descarga, reducir la fluidez de funcionamiento
Después de todo, la optimización del proyecto hay bala de plata, esta parte del método de optimización eficiente es probable que conduzca a otra parte de los proyectos ineficientes .Una copia del proyecto B puede ser inútil.
Así que cortamos cachorro plan puede hacer es una profunda comprensión de los principios de estas tecnologías, y adquirir experiencia en el proyecto, sólo una profunda comprensión de las ventajas y desventajas de cada tecnología, solamente un profundo conocimiento de las necesidades y hábitos de los usuarios para que los proyectos específicos, escenas específicas, fueron los más tratamiento adecuado.
Este artículo se reproduce en el 2048 simio: plan de recorte de los Cachorros de cultivo de auto-- optimización del proceso de carga de imágenes