Echo.js pur javascript léger le pouce paresseux du code d'instance
Démo
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <taptin> image javascript simple bibliothèque de chargement lazy echo.js </title> <style> .demo img {width: 736px; hauteur: 490px; Contexte: URL (images / chargés.gif) 50% sans répétition;} </ style> </head> <body> <h1 style = "margin: 40px; font: 32px Microsoft Yahei; Text-Align: Center;"> Image JavaScript simple Lazy Loading Library ECHO.JS DeMo </h1> <v> <img Src = "Images / Blad. data-echo = "images / big-1.jpg"> <img src = "images / blank.gif" data-cho = "images / big-2.jpg"> <img src = "images / vierge.gif" data-cho = "images / big-3.jpg"> <img src = "images / blanc.gif" data-cho = "images / big-4.jpg"> <imgf.gif "data-cho =" src = "images / blank.gif" data-echo = "images / blank.gif" data-echo = "images / big-5.jpg"> <img src = "images / blanc.gif" data-echo = "images / big-6.jpg"> <img src = "images / blank.gif" data-echo = "images / big-7.jpg"> </ script> src = "js / echo.min.js"> </ script> <cript> echo.init ({offset: 0, throttle: 0}); </cript>application
1. Présentez JS et initialisez
<script src = "{sh :: pub} js / echo.min.js"> </cript> </ script> echo.init ({offset: 0, throttle: 0}); </cript>2. Attachez les attributs à l'image
<img src = "{sh :: pub} img / commun / blank.gif" data-echo = "{sh: $ gods.logoimg}">3. Définissez l'arrière-plan par défaut pour les images non chargées, GIF dynamiques
.lazy {largeur: 100%; hauteur: 100%; arrière-plan: URL ({sh :: pub} img / commun / charging.gif) 50% sans répétition;}Très pratique et pratique.
Pour améliorer encore la vitesse des pages Web d'ouverture, vous pouvez optimiser les images téléchargées.
La page Web est lente, ce n'est rien de plus que cela, la requête est lente, l'image se charge lentement, l'image n'est pas chargée de retard et les données de l'image sont trop grandes.
Sur la base de ces raisons, les résolvez progressivement.
Améliorer l'expérience utilisateur.
L'exemple de code ci-dessus pour le chargement paresseux léger JavaScript pur d'Echo.js est le contenu entier partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.