Skip to content
the way you perform infinite loading
HTML JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
.gitignore
LICENSE
README.md
bower.json
demo.gif
kamehameha.gif

README.md

#Kamehameha — the way you perform infinite loading

What is kamehameha?

kamehameha

Kamehameha is a kind of energy attack in the Dragon Ball series, and is Goku's signature technique.

How it goes with infinite loading

Let's simplify kamehameha and compare it with infinite loading:

states action kamehameha infinite loading
ready 1 watch on certain enemy watch on scrolling event
triggering 2 make a right pose scroll the page to bottom
locked ... can't be interrupted until finish the action can't issue next request until finish current request
holding 3 collect energy request data through ajax
emitting 4 booom!!! rendering the results
resting 5 take a rest delay a short period (to avoid request burst)
unlocked ... go back to ready state go back to ready state

How it works

This toy class defines an action flow of infinite loading by applying the kamehameha metaphor. It Helps user to focus on the business logic: event lisening, loading and rendering.

  1. Create a GoKu. (GoKu is the character who can perform kamehameha with great power. "Kamehameha" is hard to spell. "Goku" should be more human-friendly.)

    var options = {
    	watch: function (next) {}
    	,shouldTrigger: function (event) {}
    	,onHold: function (next) {}
    	,onEmit: function (next) {}
    	,restingSeconds: <number>
    }
    var goku = new Goku(options);
  2. Decide a watching target (options.watch). By default, he watches on window scroll event

  3. Decide a triggering condition (options.shouldTrigger). By default, he triggers the action while page reaches bottom

    // trigger it once the distance to bottom is less than 100px
    shouldTrigger: function (event) {
        var heightViewport = $(window).height();
        var distanceFromViewportTopToPageBottom
                = $(document).height() - $(document).scrollTop();
        return (distanceFromViewportTopToPageBottom - heightViewport) < 100;
    }
  4. Decide a callback to perform ajax requesting (options.onHold).

    // load 10 images from http://lorempixel.com/
    onHold: function(counter, next) {
        // ...
        // (new Image()).src = 'http://lorempixel.com/...';
        // ...
        next();
    }
  5. Decide a callback to perform data rendering (options.onEmit).

    // render each loaded image
    onHold: function(counter, next) {
        // ...
        // $canvas.append(imageObject);
        // ...
        next();
    }
  6. Decide how long to take a rest (options.restingSeconds). By default, it's one second.

  7. Ask Goku to study what you teach and start to work

    goku.study();

Kamehameha in action

kamehameha

You can’t perform that action at this time.