src & docs : update imagesLoaded @paulirish method; touch up imagesLoaded examples

_posts/demos/2011-01-11-images.html

@@ -34,7 +34,7 @@ photos:
       var $container = $('#container');
     
       $container.imagesLoaded( function(){
-        $(this).isotope({
+        $container.isotope({
           itemSelector : '.photo'
         });
       });

_posts/docs/2011-12-11-help.mdown

@@ -66,13 +66,15 @@ If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net
 
 ### imagesLoaded plugin
 
-The next best solution is to use the imagesLoaded plugin included with Isotope. It's a fork of [Paul Irish's plugin](https://gist.github.com/268257) that finds all the images in a context, and fires  a callback function once all the images have loaded.
+The next best solution is to use the [imagesLoaded plugin](https://github.com/desandro/imagesloaded) included with Isotope. It's a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded.
 
 {% highlight javascript %}
 
-$('#container').imagesLoaded( function(){
-  $(this).isotope({
-    itemSelector : '.item',
+var $container = $('#container');
+
+$container.imagesLoaded( function(){
+  $container.isotope({
+    // options...
   });
 });
 

jquery.isotope.js

@@ -1,5 +1,5 @@
 /**
- * Isotope v1.4.110823
+ * Isotope v1.4.110825
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -1175,49 +1175,48 @@
   
   
   // ======================= imagesLoaded Plugin ===============================
-  // https://gist.github.com/964345
+  // https://github.com/desandro/imagesloaded
 
-  // $('img.photo',this).imagesLoaded(myFunction)
+  // $('#my-container').imagesLoaded(myFunction)
   // execute a callback when all images have loaded.
   // needed because .load() doesn't work on cached images
 
-  // modified by yiannis chatzikonstantinou.
+  // callback function gets image collection as argument
+  //  `this` is the container
 
-  // original:
-  // 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`
+  // original: mit license. paul irish. 2010.
+  // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
 
   $.fn.imagesLoaded = function( callback ) {
-    var elems = this.find( 'img' ),
-        elems_src = [],
-        self = this,
-        len = elems.length;
+    var $images = this.find('img'),
+        len = $images.length,
+        _this = this,
+        blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
 
-    if ( !elems.length ) {
-      callback.call( this );
-      return this;
+    function triggerCallback() {
+      callback.call( _this, $images );
     }
 
-    elems.one('load error', function() {
-      if ( --len === 0 ) {
-        // Rinse and repeat.
-        len = elems.length;
-        elems.one( 'load error', function() {
-          if ( --len === 0 ) {
-            callback.call( self );
+    function imgLoaded() {
+      if ( --len <= 0 && this.src !== blank ){
+        setTimeout( triggerCallback );
+        $images.unbind( 'load error', imgLoaded );
       }
-        }).each(function() {
-          this.src = elems_src.shift();
-        });
     }
-    }).each(function() {
-      elems_src.push( this.src );
+
+    if ( !len ) {
+      triggerCallback();
+    }
+
+    $images.bind( 'load error',  imgLoaded ).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;
+      }
     });
 
     return this;