今天做一个列表项需要用到懒加载,搜到网友推荐的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. 8.1.1 Connection 对象

    Connect是sqllite3模块中最基本的也是最重要的一个类,其主要方法如下表所示: 方法 说明 execute(sql[,parameters]) 执行一条SQL语句 executemany(s ...

  2. IE7浏览器下去除flash动画边框问题

    <object width="100%" height="100%" data="/templates/default/swf/guide.sw ...

  3. POJ 1821 Fence

    Fence Time Limit: 1000ms Memory Limit: 30000KB This problem will be judged on PKU. Original ID: 1821 ...

  4. MySql 内存表使用

    MySql 内存表使用 内存表使用哈希散列索引把数据保存在内存中,因此具有极快的速度,适合缓存中小型数据库,但是使用上受到一些限制,以下是蓝草使用的一些感受. 1.heap对所有用户的连接是可见的,这 ...

  5. vs2005添加include lib文件目录

    vs2005添加include lib文件目录 http://blog.sina.com.cn/s/blog_79489160010145wb.html 1. 添加编译所需要的 lib 文件 [解决方 ...

  6. JDK工具jstatd用法详解(转)

    jstatd,即虚拟机的jstat守护进程,主要用于监控JVM的创建与终止,并提供一个接口允许远程监控工具依附到在本地主机上运行的JVM. 用法摘要 jstatd [ options ] option ...

  7. vim快速操作

    简明 VIM 练级攻略 vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn ...

  8. 软件project文档中的数据库模型设计

    背景:软件project文档之<数据库设计说明书>的结构设计部分要明白规划出数据库的概念结构设计.逻辑结构设计.物理结构设计,就是设计数据库的概念模型.逻辑模型.物理模型.那么.何为数据库 ...

  9. SQL server触发器、存储过程操作远程数据库插入数据,解决服务器已存在的问题

    近期弄了一个小项目,也不是非常复杂,须要将一个数据库的一些数据备份到另外一个库.不是本地,可能是网络上其它的数据库.想了一下,用了存储过程和触发器. 也不是非常复杂,首先我须要操作远程数据库,于是写了 ...

  10. Android TextView 设置行间距

    Android系统中TextView默认显示中文时会比较紧凑,不是很美观.为了让每行保持一定的行间距,可以设置属性android:lineSpacingExtra或android:lineSpacin ...