简单的JavaScript图像延迟加载库Echo.js

时间 2019-12-14

标签简单 javascript 图像延迟加载 echo.js echo 栏目 JavaScript 繁體版

原文原文链接

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库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;">简单的JavaScript图像延迟加载库Echo.js演示</h1> <div class="demo" style="width: 736px; margin: 0 auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg"> <img class="lazy" 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>

应用javascript

1.引入js,并初始化css

<script src="{sh::PUB}js/echo.min.js"></script> <script> Echo.init({  offset: 0,  throttle: 0 }); </script>

2.给图片附上属性html

<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">

3.给未加载的图片设置默认背景，动态的gifjava

.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}

很方便，很实用。
要想进一步提高网页打开速度，能够优化上传的图片。django

网页慢，无非是，一查询慢，二图片加载慢，三没有使用延迟加载，四图片数据太大。优化

根据这些缘由，逐步解决。ui

提高用户体验。url