Echo.js Pure JavaScript Легкий код экземпляра Lazy загрузки
Демо
<! Doctype html> <html lang = "zh-cn"> <Head> <meta charset = "utf-8"> <Title> простое изображение Javascript Lazy Bulting Library echo.js </title> <style> .demo img {width: 736px; Высота: 490px; Фон: url (images/load.gif) 50% no-repeat;} </style> </head> <body> <h1 style = "margin: 40px; font: 32px microsoft yahei; text-align: center;"> Простое изображение Javascript Lazy Echo.js demo </h1> <div> <img src src gimif gimif gmiif g. data-echo = "Images/big-1.jpg"> <img src = "Images/blank.gif" data-echo = "images/big-2.jpg"> <img src = "images/blank.gif" data-checo = "images/big-3.jpg"> <img src = "Images/blank.gif". src = "Images/blank.gif" data-echo = "images/blank.gif" data-echo = "images/big-5.jpg"> <img src = "images/blank.gif" data-echo = "Images/big-6.jpg"> <img src = "Images.gif" data-checho = "Dive-7. src = "js/echo.min.js"> </script> <script> echo.init ({offset: 0, throttle: 0}); </script>приложение
1. Представьте JS и инициализируйте
<script src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({offset: 0, throttle: 0}); </script>2. Прикрепите атрибуты к картинке
<img src = "{sh :: pub} img/common/blank.gif" data-echo = "{sh: $ goods.logoimg}">3. Установите фон по умолчанию для разгруженных изображений, Dynamic GIFS
.lazy {ширина: 100%; высота: 100%; фон: url ({sh :: pub} img/common/loading.gif) 50%без повторного зарождения;}Очень удобно и практично.
Чтобы улучшить скорость открытия веб -страниц, вы можете оптимизировать загруженные изображения.
Веб -страница медленная, это не что иное, как это, запрос медленный, изображение загружается медленно, изображение не загружается задержкой, а данные изображения слишком велики.
Исходя из этих причин, постепенно разрешайте их.
Улучшить пользовательский опыт.
Приведенный выше пример кода для чистого JavaScript легкой ленивой загрузки echo.js - это весь контент, разделенный редактором. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.