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

最新推荐文章于 2024-07-11 20:55:36 发布

dijuwu9326

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tacklingpioneer/p/6138081.html

版权

<!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>

应用

1.引入js,并初始化

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

2.给图片附上属性

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

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

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

很方便，很实用。
要想进一步提升网页打开速度，可以优化上传的图片。

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

根据这些原因，逐步解决。

提升用户体验。

转载于:https://www.cnblogs.com/Tacklingpioneer/p/6138081.html

dijuwu9326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的JavaScript图像延迟加载库Echo.js

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>简单的JavaScript图像延迟加载库Echo.js</title><style>.demo img { width: 736px; heig...
复制链接

扫一扫