图片懒加载插件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 ...
随机推荐
- JS练习:替换式图片自动轮播
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- CentOS6.5下修改MySQL编码方法
1.查看默认编译,默认登陆到mysql后,通过show variable like命令来查看系统变量 可以看到,默认的数据库编码方式基本设置成了latin1的编译方式,此时我们需要将其修改成utf8的 ...
- 同开三本DJANGO,需要提升一下本职工作的能力啦
慢慢将一些概念固化到基因内,才有可能和SPRING MVC,MEAN之类的好好作比较吧. 全都是基于1.8版本的教材,爽!!!
- N天学习一个linux命令之vmstat
用途 查看系统资源整体使用情况,包括进程数量,CPU,内存,IO,swap等资源统计信息 用法 vmstat [options] [delay [ count]] 常用选项 -a 显示active/i ...
- RPC服务框架探索之Thrift
前言架构服务化后,需要实现一套方便调用各服务的框架,现在开源如日中天,优先会寻找开源实现,如果没有合适自家公司业务的,才会考虑从零开发,尤其是一切以KPI为准绳的公司,谁会跟钱过不去?N个月之前,公司 ...
- 前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并把请求分发到不同的控制器去处理,根据控制器处理后的结果,生成相应的响应发送到客户端。前端控制器既可以使用Filter实现(Struts2采用这种方式),也可以使用Servlet来实现(spring MVC框架)。
本文转自http://www.cnblogs.com/davidwang456/p/4090058.html 感谢作者 前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并 ...
- Swift和Objective-C混合编程——Swift调用OC
在iOS应用的开发中.Swift必将代替OC,两者的趋势是"短期共存,长期代替".但曾经有太多的代码是用OC语言完毕的,而Swift的开发也从 OC中继承了非常多的特性.两者也是有 ...
- 《Java程序猿面试笔试宝典》之字符串创建与存储的机制是什么
在Java语言中.字符串起着非常关键的数据.字符串的声明与初始化主要有例如以下两种情况:(1) 对于String s1=new String("abc")语句与String s2= ...
- MSP430WARE++的使用2:RSP1 driver的调用方法
MSP430WARE是一套基于C++语言的开源的MSP430层次化软件架构,支持多种外设.本文将介绍雷达測速芯片RSP1驱动程序的调用方法. 1.硬件原理图 採用下图所看到的 ...
- luogu2770 航空路线问题 网络流
题目大意: 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线.(1)从最西端城市出发,单向从西向东途经若干城市到达最东端城市,然 ...