Echo.js reines javaScript Leichtes LAY -Ladeinstanzcode
Demo
<! DocType html> <html lang = "zh-cn"> <kopf> <meta charset = "utf-8"> <titels> Einfaches JavaScript-Bild LAY Ladebibliothek echo.js </title> <style> .demo img {width: 736px; Höhe: 490px; Hintergrund: URL (Bilder/Laden.gif) 50% No-Repeat;} </style> </head> <body> <h1 style = "margin: 40px; font: 32px microsoft yahei; text-align;"> Einfache Javascript-Bild Lazy Ladebibliothek. data-echo="images/big-1.jpg"> <img src="images/blank.gif" data-echo="images/big-2.jpg"> <img src="images/blank.gif" data-echo="images/big-3.jpg"> <img src="images/blank.gif" data-echo="images/big-4.jpg"> <img src = "Bilder/leer.gif" data-echo = "Bilder/leer.gif" data-echo = "Bilder/Big-5.jpg"> <img Src = "Bilder/leer.gif" data-echo = "Bilder/Big-6.jpg"> <img Src = "bloße. src = "js/echo.min.js"> </script> <script> echo.init ({offset: 0, drosseltle: 0}); </script>Anwendung
1. Einführen Sie JS ein und initialisieren Sie
<script src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({offset: 0, drosseltle: 0}); </script>2. Fügen Sie das Bild Attribute hinzu
<img src = "{sh :: pub} img/Common/blank.gif" data-echo = "{sh: $ goods.logoimg}">3. Setzen Sie den Standardhintergrund für entladene Bilder, dynamische GIFs
.Lazy {Breite: 100%; Höhe: 100%; Hintergrund: URL ({sh :: pub} img/Common/Loading.gif) 50%No-Repeat;}Sehr bequem und praktisch.
Um die Geschwindigkeit des Öffnens von Webseiten weiter zu verbessern, können Sie die hochgeladenen Bilder optimieren.
Die Webseite ist langsam, nichts weiter als das, die Abfrage ist langsam, das Bild lädt langsam, das Bild ist nicht mit Verzögerung geladen und die Daten des Bildes sind zu groß.
Basierend auf diesen Gründen lösen Sie sie nach und nach.
Benutzererfahrung verbessern.
Der obige Beispielcode für reines JavaScript Leichtes Lazy Loading von echo.js ist der gesamte Inhalt, der vom Editor geteilt wird. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.