echo.js图片懒加载插件

文件大小:0.002MB下载:887次
图片懒加载可以防止页面一次性向服务器发送大量请求,导致服务器响应面,页面卡顿崩溃等。

实现原理:

先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中。达到懒加载的效果。

使用echo.js可以轻松实现图片懒加载,使用很简单,代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
<script type="text/javascript" src="js/echo.js"></script>
</head>

<body>
<img src="images/grey.jpg" data-echo="images/1.jpg" />
</body>
<script type="text/javascript">
echo.init({
offset : 0,//可是区域多少像素可以被加载
throttle : 0 //设置图片延迟加载的时间
});
</script>
</html>

完整代码下载地址如下:

链接: https://pan.baidu.com/s/1GK0t7qFyjoASEEavqOw1xw  提取密码: uo4d 点击下载
收藏
扫一扫关注我们