异度传媒 异度传媒
  • 首页
  • 异度传媒官网
  • 互联网
    • 敲代码
    • 搞软件
    • 玩游戏
  • 联系我们
  • 注册 登录
立即登录
  • 首页
  • 异度传媒官网
  • 互联网
    • 敲代码
    • 搞软件
    • 玩游戏
  • 联系我们
  • 拨打电话
首页 › 敲代码 › 轻量级图片懒加载 echo.js
javascript

轻量级图片懒加载 echo.js

2020年06月05日
0 0

echo.js是一个独立的JavaScript(不依靠jQuery)、轻量级的、延迟图片加载插件,echo.js压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。

使用echo.js非常简单,在网页需要延迟加载的img标签中,设置data-echo属于指向需要加载的图片路径,src属性指向默认加载图片路径。然后引入echo.min.js,并初始化echo即可。

<script src="js/echo.min.js"></script>

<script>
echo.init({
// options初始化参数
	offset:0,
	throttle:0
});
// echo.render();
</script>

<img src="images/loading.gif" data-echo="images/photo.jpg">
<!-- src里面放一个加载的loading.gif图,真正的地址放在data-echo即可 -->

常用参数及方法说明

——offset 默认值为0,设置上下左右到viewport的距离多少才加载图片。

——offsetVertical 默认值为0,设置上下到viewport的距离是多少才加载图片。

——offsetHorizontal 默认值为0,设置左右到viewport的距离是多少才加载图片。

——offsetTop 默认值为offsetVertical,设置顶部距离viewport的距离

——offsetButton 默认值为offsetVertical,设置顶部距离viewport的距离

——offsetLeft 默认值为offsetVertical,设置左边距离viewport的距离

——offsetRight 默认值为offsetVertical,设置右边距离viewport的距离

——throttle 单位毫秒 设置图片延迟加载时间,通俗点说就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:鼠标移动,mousemove事件;DOM元素动态定位,window对象的resize和scroll事件。

——debounce 单位布尔值,默认true,unload 单位布尔值,默认false。该选项告诉echo,当图片滑动超过了viewport的时候不在加载该图片。

——callback 单位函数,回调函数会传递已更新的元素和操作(load或者unload)给回调函数。

最后echo.js还提供了一个.render()方法,用法如下:

echo.render();

应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用echo.render()

提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。

下载地址:

GitHub下载 蓝奏网盘下载 CSDN下载 90网盘下载 百度网盘下载提取码:xcwu

0 0

微信扫一扫支持一下我们

等0人赞过
相关文章
javascript限制域名调用
点击自定义超链接按钮弹出百度商桥对话框
php URL跳转代码
javascript网站随机弹出QQ对话窗口
JavaScript禁止查看网页源代码的简单实现方法
评论 (88)
请登录以参与评论。
立即登录
  • 游客

    评论系统正在维护中……

    2020年06月05日
    回复
    • 游客评论

      @游客 评论系统正在维护中……

      2020年06月05日
      回复
异度小编管理员
推荐阅读
emlog去除分类目录前的sort(需开启伪静态)
2019-12-29
HTML中禁止网页另存为、查看源文件、障蔽鼠标右键
2019-12-29
emlog侧栏最新评论显示评论文章标题和时间
2019-12-29
装机必备软件
2020-03-28
javascript网站随机弹出QQ对话窗口
2019-12-29
最新文章
JavaScript根据不通的域名显示不同的备案号和内容
2020年08月16日
经常一个网站会绑定多个域名,根据不同域名显示不同的备案号。以下用 JavaScript 来实现这个效果。JavaScript根据不通的域名显示不同的备案号和内容
[阅读全文]
彻底解决phpcms V9二级域名下分页路径不正确问题
2020年07月15日
在用 phpcms V9 做二次开发的时候,做英文站的时候经常会在根目录新建子目录来搭建一个新站,我使用的是伪静态,分页的时候分页地址出现错误,分页地址显示的是根域名的地址。
[阅读全文]
网站不支持timthumb.php的解决方法
2020年07月03日
由于timthumb php基于安全问题,所以它不支持指定网站的外部链图像以外的任何外部链映像;另一方面,它是由于处理本机图片地址造成的。
[阅读全文]
轻量级图片懒加载 echo.js
2020年06月05日
echo是一个独立的JavaScript(不依靠jQuery)、轻量级的、延迟图片加载插件,echo压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。
[阅读全文]
phpcms调用栏目及循环调用多个子栏目中的文章列表
2020年03月31日
phpcms调用栏目及循环调用多个子栏目中的文章列表,特别适用于有3级目录,在2级目录调用所有3级子目录的所有文章。
[阅读全文]
更多
标签
局域网 css 编程 缩略图 html ajax timthumb destoon 分页 SSL 腾讯 淘宝 红色警戒 宝塔 视频 mp4 https 优惠券 七牛云 网站
更多
  • 首页
  • 关于我们
  • 文章列表
  • 联系我们
Copyright © 异度传媒 2009-2021 粤ICP备16051972号-3 Sitemap
友情链接: 领潮照明