下面小编就为大家带来一篇 ECHO.js 纯 javascript 轻量级延迟加载的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足 1k)和使用 html5 的 data- 属性。Echo 支持 IE8+ 。
ECHO.js 纯 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>
应用
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;
- }
很方便,很实用。
要想进一步提升网页打开速度,可以优化上传的图片。
网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。
根据这些原因,逐步解决。
提升用户体验。
以上这篇 ECHO.js 纯 javascript 轻量级延迟加载的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0402/265499.html