图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错。除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位置的附近的图片。例如,从第一页滑到第50项停下来,一页5项,那么中间6到40多项的图片不会加载。第50项附近的项的图片才会加载。另外,这个插件不依赖任何库,是我最钟意的原因。
但是,出现了一个问题。我的列表项是在body元素中的一个ul,不是body在滚动,是这个ul在滚动,看了一下源码,似乎这个插件定死了只能监听body滚动事件,于是动手改造之。改造之后,传到了github上。
我在官方源码基础上添加了一个名为container的配置项,这个就是滚动的元素,上面的ul元素赋值给这个container就行了。例子:
假设这个ul的id是“list”,
echoChangeByCc.init({
container:document.getElementById("list")
});
非常简单。
如果不传入container,则将默认监听document.body。
兼容性还没测试,现代流行的浏览器应该是没得问题,微信好像也没问题。如果你要使用,建议先进行测试。
图片懒加载插件echo.js——改造的更多相关文章
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
随机推荐
- Linux之强大的selinux
简单点说,SELinux就是用来加强系统安全性的.它给一些特定程序(这些程序也在不断增加)做了一个沙箱,它将文件打上了一个安全标签,这些标签属于不同的类,也只能执行特定的操作,也就是规定了某个应用程序 ...
- 32.修改IK分词器源码来基于mysql热更新词库
主要知识点, 修改IK分词器源码来基于mysql热更新词库 一.IK增加新词的原因 在第32小节中学习到了直接在es的词库中增加词语,来扩充自已的词库,但是这样做有以下缺点: (1)每次添加完 ...
- Windows学习总结(7)——学会CMD命令提示符的重要性
作为普通电脑用户,大家接触最多的应该 是可视的操作系统界面.可是如果想真正学好计算机,学习好命令提示符可就是必不可少的.它可以更高效的帮助我们处理问题. 命令提示符是在操作系统中,提示进行命令输入的一 ...
- Wizard's Tour
F. Wizard's Tour time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- CF #330 C
改了题目之后,就是没有奇数的测试了... 其实可以很轻易地发现,要距离近的一方只会删除两端的,而要求远的一方会删除中间的. 那么,很明显的,剩下的两点会相差x/2个节点,于是,只要计算i和i+x/2的 ...
- Delphi春天将来临,Android遇到XE7我也是醉了,Hello World
回首往日,从Delphi 7走到如今.总感觉不愠不火.期间论坛倒掉无数,没倒掉的也半死不活,大批的程序猿转向C#,Java,PHP. Delphi的开发高效有目共睹,一直不忍放弃.Delphi以前一夜 ...
- 3.2 Piecewise Linear Interpolation(站点)
Newton Interpolation: https://www.youtube.com/watch? v=EyRQXA56asI Piecewise Linear Interpolation: h ...
- android 音乐播放器总结
学习从模仿開始 一个星期完毕的音乐播放器基本功能,具有下一首,上一首,暂停和随机.顺序和单曲等播放.以及保存上一次播放的状态,缺少了歌词显示功能.使用了andbase框架的欢迎动画和界面title. ...
- ios 视频播放代码Demo
方法一: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. / ...
- 【HDOJ 2255】奔小康赚大钱(KM算法)
[HDOJ 2255]奔小康赚大钱(KM算法) 奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...