barretlee / lazyload

Lazyload images or lazy execute scripts. （图片脚本懒加载）

Lazyload

A mini lazyload component within 100 lines code, support amd/cmd require.

文章导读 in Chinese: http://www.barretlee.com/blog/2015/11/16/lazyload-component/

Live Demo: http://barretlee.github.io/lazyload/demo/index.html

Usage

Include the lazyload scirpt to your html:

<script src="https://raw.githubusercontent.com/barretlee/lazyload/master/index.js"></script>

<div class="box">
  <div class="item"><img src data-src="img-path"></div>
  <div class="item"><textarea>alert(1)</textarea></div>
</div>

It exports an api to global:

new Lazyload('.box .item', {
  callback: function(){
    console.log("All item loaded");
  }
});

Params

There are two param your can set when get an Lazyload instance:

new Lazyload('.item', {
  tag: "data-src",
  distance: 0,
  callback: function(){
    // ...
  }
});

• tag, default is 'data-src', we set the lazyload image 'src' to null, then read 'data-src' attribute;
• distance, default is 0, if you want to show the lazyload element in advance, you can set it to a positive number;
• callback, when all item loaded, it will trigger.

Also, two more api:

var lazyload = new Lazyload();
lazyload.pause();
setTimeout(function(){
  lazyload.restart();
});

• .pause(), pause the lazyload use the inner variable _pause;
• .resetart(), set _pause false;

Liscese

Under MIT Liscese. Copyright (c) 2015 小胡子哥(Barret Lee)

changelog

• 2015-11-20
  • add callback function
  • add pause and restart function

lazyload's Issues

关于代码的一些疑问

你好，胡子哥。我在看你的$()函数，发现你使用了一句sheet.addRule(query, "a:b")，然后获取到document.all后判断当前的元素是否有a属性，再将有a属性的添加到结果数组中，我想请问下，这样做的原理是什么呢？
如果可以的话，请稍加点拨下，谢谢啦。

属性distance 应该没有达到你预期的效果

觉得你想要的distance 效果是还没进入屏幕的元素在一个距离范围内，就提前开始加载。
看代码，只是做了个区域偏移。比如我设个distance = 12000，当前屏幕的元素都不会执行加载。

比如我设个500，那屏幕上边500px内的元素就不会进行加载，即使进入了可视区。

Lazyload.prototype._detectElementIfInScreen = function () {
        // pause 可以提前判断，可以减少一些不需要执行的代码被执行
        if (!this.elements.length || !this._pause) return;

觉得图片是否加载的判断点应该在图片本身而不是容器

目前是容器进入区域，就一股脑的把里面的图片全去加载了。
比如手机上，无限加载的列表页，每次ajax得到16~32个图片地址，插入进ul列表，所有图片会同时去加载，没得到想要的效果。

api应该是传入图片的容器，但是应该判断容器里的每个图片是否进入可视区。

当需要懒加载的元素页面刷新时rect.top 就小于0，不会自动加载

当用户打开页面，滑动滚动条，然后F5刷新页面，就会出现这种情况

• 在loadItem的判断条件中加入 rect.top < 0 && (rect.top + rect.height) >= this.DISTANCE
• 在loadItem中增加所有图片加载完成的回调函数