今天做一个列表项需要用到懒加载,搜到网友推荐的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——改造的更多相关文章

  1. 图片懒加载插件lazyload.js详解

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  3. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  4. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  5. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  6. 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  7. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  8. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  9. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

随机推荐

  1. Django 初学

    一.什么是web框架 框架,即framework  ['fremwɝk],特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞 ...

  2. JS布尔值(Boolean)转换规则

    原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...

  3. python爬虫14 | 就这么说吧,如果你不懂python多线程和线程池,那就去河边摸鱼!

    你知道吗? 在我的心里 你是多么的重要 就像 恩 请允许我来一段 freestyle 你们准备好了妹油 你看 这个碗 它又大又圆 就像 这条面 它又长又宽 你们 在这里 看文章 觉得 很开心 就像 我 ...

  4. 一个电商项目的Web服务化改造3:改进方案の规范和约定、单表、单一职责

         最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA.      有点挑战,做完了,会有很大进步. 上一篇,我们描述了原有项目中的问题.  或者说是,本篇的基本 ...

  5. linux学习3-简单磁盘管理

    简单的磁盘管理 下面涉及的命令具有一定的危险性,操作不当可能会丢失你的个人数据,初学者建议在虚拟环境中进行操作 通常情况下,这一小节应该直接将如何挂载卸载磁盘,如何格式化磁盘,如何分区,但如你所见,我 ...

  6. SGC强制最低128位加密,公钥支持ECC加密算法的SSL证书

      Pro SSL证书,验证企业域名所有权和企业身份信息,采用SGC(服务器门控)技术强制128位以上至256位加密,属于企业OV验证级专业版(Pro) SSL证书:即使用户使用低版本浏览器(比如浏览 ...

  7. 2、ceph-deploy之配置使用RBD

    说明 部署完ceph集群(active+clean状态)之后, 我们来实践下ceph block device(即RBD或RADOS block device). 我们需要在一台新的client节点上 ...

  8. POJ 1416 Shredding Company 回溯搜索 DFS

    Shredding Company Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6173   Accepted: 3361 ...

  9. 整理100道 .net面试题

    前段时间,我在准备面试的时搜到的一套 net开发人员面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需. 1. .NET和C#有什么区别 答:.NET一般指 ...

  10. password加密的算法

    加密原理:採用不同的加密算法对字符串进行加盐加密处理. 用以防止密文被md5字典进行反向暴力破解. 採用美国家安全局发布的加密算法(RFC 4357)加密,不採用自己创建的加密算法,以避免有安全漏洞. ...