Echo.js JavaScript Ligero Ligero de carga Lazy Carga Código de instancia
Manifestación
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> javascript imagen lazy de carga de la biblioteca echo.js </title> <style> .Demo img {ancho: 736px; Altura: 490px; Antecedentes: URL (Images/Loading.gif) 50% No-Repeat;} </style> </head> <body> <h1 style = "margin: 40px; font: 32px Microsoft yhehei; text-align: center;"> Imagen de javascript simple de javascript Lazzy Libray Biblioteca eco.js damo </h H1> <viv> <img src = "Images de javaScript Lazy Lozy eco de la biblioteca eco.js demos </h1> <viV> <iMg SRC =" IMAGES/BLANCA DE LAZAY LAZAZA data-eco = "imágenes/big-1.jpg"> <img src = "images/blank.gif" data-eco = "imágenes/big-2.jpg"> <img src = "imágenes/blank.gif" data-eco = "imágenes/big-3.jpg"> <img src = "imágenes/blank.gif" data-eCho = "imágenes/big-4.jpg" <img src = "imágenes/blank.gif" data-eCho = "Images/big-4.jpg" <img src = "Images/blank.gif" data-eCho = "Images/big-4.jpg" <iMg src = "Images/blank.gif" src = "imágenes/blank.gif" data-eco = "images/blank.gif" data-eco = "images/big-5.jpg"> <img src = "images/blank.gif" data-eco = "imágenes/big-6.jpg"> <img src = "Images/blank.gif" data-eco = "imágenes/big-7.jpggggggggg"> <script " src = "js/echo.min.js"> </script> <script> echo.init ({offset: 0, acelerado: 0}); </script>solicitud
1. Introducir a JS e inicializar
<script src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({offset: 0, acelerador: 0}); </script>2. Adjunte los atributos a la imagen
<img src = "{sh :: pub} img/common/blank.gif" data-eco = "{sh: $ goods.logoimg}">3. Establezca fondo predeterminado para imágenes descargadas, gifs dinámicos
.Lazy {ancho: 100%; altura: 100%; fondo: url ({sh :: pub} img/común/loading.gif) 50%sin repetición;}Muy conveniente y práctico.
Para mejorar aún más la velocidad de abrir páginas web, puede optimizar las imágenes cargadas.
La página web es lenta, no es más que eso, la consulta es lenta, la imagen se carga lentamente, la imagen no está cargada de retraso y los datos de la imagen son demasiado grandes.
Según estas razones, resuelva gradualmente.
Mejorar la experiencia del usuario.
El código de ejemplo anterior para JavaScript Lightweight Lazy Loading of Echo.js es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.