Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

#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

About

the way you perform infinite loading

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published