Skip to content

Instantly share code, notes, and snippets.

@kottenator

kottenator/gist:960033

Forked from paulirish/README.md
Created May 6, 2011 23:58
Show Gist options
  • Save kottenator/960033 to your computer and use it in GitHub Desktop.
Save kottenator/960033 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kottenator revised this gist May 7, 2011. 1 changed file with 35 additions and 22 deletions.
    57 changes: 35 additions & 22 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,44 @@
    // $('img.photo',this).imagesLoaded(myFunction)
    // execute a callback when all images have loaded.
    // needed because .load() doesn't work on cached images
    /**
    * Execute a callback when all images have loaded.
    * needed because .load() doesn't work on cached images
    *
    * Usage:
    * $('img.photo').imagesLoaded(myFunction)
    * -> myFunction() { this == [jQuery collection of 'img'] }
    *
    * $('img.photo').imagesLoaded(myFunction, myContext)
    * -> myFunction() { this == myContext }
    *
    * Adds:
    * + Image error counts as image load.
    * + Empty 'img' set fires callback.
    *
    * MIT license. kottenator. 2011
    */

    // mit license. paul irish. 2010.
    // webkit fix from Oren Solomianik. thx!
    $.fn.imagesLoaded = function(callback, context) {
    var elems = this.filter('img'),
    len = elems.length,
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    // callback function is passed the last image to load
    // as an argument, and the collection as `this`
    context = context || elems;

    function countdown() {
    if (this.src != blank) {
    if (--len <= 0)
    callback.call(context, this);
    }
    }

    $.fn.imagesLoaded = function(callback){
    var elems = this.filter('img'),
    len = elems.length,
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    elems.bind('load',function(){
    if (--len <= 0 && this.src !== blank){ callback.call(elems,this); }
    }).each(function(){
    // cached images don't fire load sometimes, so we reset src.
    if (this.complete || this.complete === undefined){
    elems.each(function() {
    var src = this.src;
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = blank;
    $(this).one('load error', countdown);
    this.src = src;
    }
    });
    });

    return this;
    if (!elems.length)
    callback.call(context);

    return this;
    };
  2. @paulirish paulirish revised this gist Apr 29, 2011. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,17 +11,18 @@

    $.fn.imagesLoaded = function(callback){
    var elems = this.filter('img'),
    len = elems.length;
    len = elems.length,
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    elems.bind('load',function(){
    if (--len <= 0){ callback.call(elems,this); }
    if (--len <= 0 && this.src !== blank){ callback.call(elems,this); }
    }).each(function(){
    // cached images don't fire load sometimes, so we reset src.
    if (this.complete || this.complete === undefined){
    var src = this.src;
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    this.src = blank;
    this.src = src;
    }
    });
  3. @paulirish paulirish revised this gist Jun 30, 2010. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,8 @@ $.fn.imagesLoaded = function(callback){
    if (this.complete || this.complete === undefined){
    var src = this.src;
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    this.src = '#';
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    this.src = src;
    }
    });
  4. @paulirish paulirish revised this gist May 29, 2010. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,4 +24,6 @@ $.fn.imagesLoaded = function(callback){
    this.src = src;
    }
    });

    return this;
    };
  5. @paulirish paulirish revised this gist Apr 8, 2010. 1 changed file with 10 additions and 4 deletions.
    14 changes: 10 additions & 4 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,19 +3,25 @@
    // needed because .load() doesn't work on cached images

    // mit license. paul irish. 2010.
    // webkit fix from Oren Solomianik. thx!

    // callback function is passed the last image to load
    // as an argument, and the collection as `this`


    $.fn.imagesLoaded = function(callback){
    var elems = this.filter('img'),
    len = elems.length;

    elems.bind('load',function(){
    if (--len <= 0){ callback.call(elems,this); }
    }).each(function(){
    // cached images don't fire load sometimes, so we reset src.
    if (this.complete || this.complete === undefined){ this.src = this.src; }
    // cached images don't fire load sometimes, so we reset src.
    if (this.complete || this.complete === undefined){
    var src = this.src;
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    this.src = '#';
    this.src = src;
    }
    });
    }

    };
  6. @paulirish paulirish created this gist Jan 4, 2010.
    21 changes: 21 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    // $('img.photo',this).imagesLoaded(myFunction)
    // execute a callback when all images have loaded.
    // needed because .load() doesn't work on cached images

    // mit license. paul irish. 2010.

    // callback function is passed the last image to load
    // as an argument, and the collection as `this`

    $.fn.imagesLoaded = function(callback){
    var elems = this.filter('img'),
    len = elems.length;

    elems.bind('load',function(){
    if (--len <= 0){ callback.call(elems,this); }
    }).each(function(){
    // cached images don't fire load sometimes, so we reset src.
    if (this.complete || this.complete === undefined){ this.src = this.src; }
    });
    }