图片懒加载插件echo.js——改造

今天做一个列表项需要用到懒加载，搜到网友推荐的echo.js，试用了一下，还不错。除了懒加载，还提供了throttle——节流，即用户快速滑动列表时，很快滑过的项的图片不会加载，只会加载最后停下来的位置的附近的图片。例如，从第一页滑到第50项停下来，一页5项，那么中间6到40多项的图片不会加载。第50项附近的项的图片才会加载。另外，这个插件不依赖任何库，是我最钟意的原因。

但是，出现了一个问题。我的列表项是在body元素中的一个ul，不是body在滚动，是这个ul在滚动，看了一下源码，似乎这个插件定死了只能监听body滚动事件，于是动手改造之。改造之后，传到了github上。

我在官方源码基础上添加了一个名为container的配置项，这个就是滚动的元素，上面的ul元素赋值给这个container就行了。例子：

假设这个ul的id是“list”，

1 echoChangeByCc.init({
2     container:document.getElementById("list")
3 });

非常简单。

如果不传入container，则将默认监听document.body。

兼容性还没测试，现代流行的浏览器应该是没得问题，微信好像也没问题。如果你要使用，建议先进行测试。

 

转载于:https://www.cnblogs.com/robc/p/5431425.html