ECHO.js pure javascript lightweight lazy loading instance code
Demo
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>Simple JavaScript image lazy loading library Echo.js</title><style>.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}</style></head><body><h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">Simple JavaScript image lazy loading library Echo.js demo</h1><div> <img src="images/blank.gif" 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="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/blank.gif" data-echo="images/big-7.jpg"></div><script src="js/echo.min.js"></script><script>Echo.init({ offset: 0, throttle: 0});</script>application
1. Introduce js and initialize
<script src="{sh::PUB}js/echo.min.js"></script><script>Echo.init({ offset: 0, throttle: 0});</script>2. Attach attributes to the picture
<img src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}">3. Set default background for unloaded images, dynamic gifs
.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}Very convenient and practical.
To further improve the speed of opening web pages, you can optimize the uploaded pictures.
The web page is slow, it is nothing more than that, the query is slow, the image is loading slowly, the image is not loaded with delay, and the data of the image is too large.
Based on these reasons, gradually resolve them.
Improve user experience.
The above example code for pure javascript lightweight lazy loading of ECHO.js is the entire content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.