Discusión de procesamiento de imágenes de Taobao
La página de Taobao es muy grande, pero se abre muy rápidamente. El procesamiento de la imagen utiliza la carga de desplazamiento, lo que significa donde el eje de desplazamiento rueda y dónde se carga la imagen. Pero si desea verificar su código fuente, requerirá mucho esfuerzo, ¡porque su compresión y fusión de código se hacen bien! Debido a que la imagen se carga en el desplazamiento y la imagen no se carga durante la inicialización, luego, cuando actualiza la página en la parte inferior de la página, la página inferior generalmente no se cargará. El enfoque de Taobao parece ser (porque no miré su código fuente, solo en base a las operaciones), refrescante para llevar la página de vuelta a la cima.
Imitar taobao y hacer desplazamiento de imágenes para cargar
Aquí hay tres formas de pensar:
1. JavaScript Carga de carga visual Carga de área visual
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Haroms front-end blog-visual área cargando javascript </title> <syle> img {ancho: 100%; bottom de margen: 30px; Min-altura: 400px; Color de fondo: #ddd;} </ystye> </head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = ""> <img huroslazyload = "desert.jpg" src = ""> <img haraomslazyload = "desert.jpg" src = "> <Mg harglazyarger. src = ""> <img haroomSlazeLoad = "koala.jpg" src = ""> <img haraomslazyload = "lighthouse.jpg" src = ""> <img haraomslazyload = "penguins.jpg" src = "" <iMg haroomslazyload = "tulips.jpg" src = "<scry" <scry "<scry" <scry " imgnum = document.getElementsByTagName ('img'). Longitud; var imgobj = document.getElementsBytagName ("img"); var l = 0; Window.onscroll = function () {var SeeHeight = document.documentelement.clientHeight; var scrollTop = document.documentelement.scrolltop || document.body.scrolltop; for (var i = l; i <imgnum; i ++) {if (imgobj [i] .OffSettop <SeeHeight+scrollTop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); if (imgobj [i] .getAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ("haoroomslazyload"); }} if (imgobj [i] .OffSettop> SeeHeight + ScrollTop) {l = i; romper; }}}} </script>Preste atención a mis dos salidas de consola, console.log (imgobj [i] .src); ¡Para obtener toda la dirección del navegador!
2. JQuery Carga de carga visual Carga de área
¡El JS anterior se traduce con jQuery!
var l = 0 // JS Método Versión de traducción $ (ventana) .bind ("scroll", function (event) {for (var i = l; i <$ ("img"). longitud; i ++) {if ($ ("img"). eq (i) .offset (). top <parseint ($ (ventana) .Height ())+parseint ($ (window) .scRoll) if ($ ("img"). eq (i) .attr ("src") == "") {var lazyloadsrc = $ ('img'). Eq (i) .attr ("haoroomslazyload"); if ($ ("img"). eq (i) .Offset (). Top> parseInt ($ (ventana) .Height ()) + parseInt ($ (ventana) .scrollTop ()) {l = i;3. Extensión de carga del área visual
Por ejemplo, un efecto de animación o una imagen de lienzo, el efecto que quiero lograr es que no se carga inicialmente. Al desplazarse hacia la animación o el gráfico, se cargará. Entonces podemos realizar las siguientes mejoras basadas en el código anterior:
$ (ventana) .bind ("scroll", function (evento) {// La altura de la ventana + la altura de la parte superior invisible = la altura de la parte inferior de la pantalla desde la var de la parte superior de la pantalla desde la varilla superior PictureTop = parseInt ($ (Window) .Offset (). Top); Su función de carga aquí y la función de carga se moverá del documento original. ¡Listo aquí!Refrescar de nuevo hasta arriba
Cuando hacemos la carga del área visual, generalmente dejamos que se refresque a la parte superior. Como Taobao. Actualice de nuevo hasta arriba.
No sé cómo lo hace Taobao. Actualice de nuevo a la parte superior, utilicé el evento OnbeforeNunload.
Los eventos de OnBoreNload y OnUnload, OnUnload y OnboreNunload se llaman cuando se actualizan o se cierran. Se pueden especificar en el script <cript> a través de la ventana. La diferencia es que OnBeforeSload se ejecuta antes de OnUnload, también puede evitar la ejecución de OnUnload.
OnbeforeNunload también se llama cuando la página se actualiza o se cierra. OnbeforeNunload se llama cuando está a punto de ir al servidor para leer una nueva página, pero aún no ha comenzado a leerla. OnUnload ha leído la nueva página que debe cargarse desde el servidor, y se llama cuando la página actual está a punto de ser reemplazada. OnUnload no puede evitar actualizaciones y cierres de páginas. Y OnboreNunload puede hacerlo.
1. Solo se ejecuta la carga cuando se carga la página
2. Cuando la página está cerrada, ejecute primero elaborada
3. Al actualizar la página, primero ejecute OnBeforeSload, luego OnUnload y finalmente OnLoad.
Realizar refrescante a la cima es usar este evento, puede escribirlo así.
Window.onbeforeNoLload = function () {$ (Window) .ScrollTop (0);}Cuando se usan todas las imágenes en el sitio web, pero el área está cargada, y el CSS y los JS se fusionan y se comprimen, ¡la velocidad y el rendimiento de nuestro sitio web mejorarán mucho!
Si desea hacerlo como Taobao, puede mejorar el código.
De hecho, la idea de la carga retrasada es poner la imagen en un Data-SRC o una propiedad primero. Cuando la página se deslice en el área visual, asigne la dirección de imagen almacenada a SRC.
No enumeraré el código aquí.