Coder Social home page Coder Social logo

barretlee / lazyload Goto Github PK

View Code? Open in Web Editor NEW
90.0 7.0 34.0 14 KB

Lazyload images or lazy execute scripts. (图片脚本懒加载)

Home Page: https://barretlee.github.io/lazyload/demo/index.html

License: MIT License

HTML 52.75% JavaScript 47.25%
lazyload lazyload-images javascript lazyload-script

lazyload's Issues

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

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

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

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

关于代码的一些疑问

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

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.