Merge branch 'feature-onload'

* feature-onload:
  bump version
  move callback into onload function
  loaded state triggered by event from element, not position in viewport, when possible
  typo
  fire event on image load

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "laziestloader",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "homepage": "https://github.com/sjwilliams/laziestloader",
   "authors": [
       "Josh Williams <[email protected]>"

index.html

@@ -283,10 +283,10 @@ <h1>LaziestLoader</h1>
     </section>
 
     <section class="installation">
-        <h2>Download v0.5.0</h2>
+        <h2>Download v0.5.1</h2>
         <ol>
-            <li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.0/jquery.laziestloader.js">Development Version</a></li>
-            <li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.0/jquery.laziestloader.min.js">Production Version</a></li> 
+            <li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.1/jquery.laziestloader.js">Development Version</a></li>
+            <li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.1/jquery.laziestloader.min.js">Production Version</a></li> 
             <li><span class="code">$ npm install laziestloader</span></li>
             <li><span class="code">$ bower install laziestloader</span></li>
         </ol>
@@ -622,6 +622,11 @@ <h2>Trigger</h2>
 
     <section id="releasehistory">
         <h2>Release History</h2>
+        <h4>0.5.1</h4>
+        <ul>
+            <li>Loaded state fired, if possible, when media actually loads, not simply triggered by viewport position. See <a href="https://github.com/sjwilliams/laziestloader/issues/8">Issue 8</a>.</li>
+        </ul>
+
         <h4>0.5.0</h4>
         <ul>
             <li>Classes added to element to reflect state.  See <a href="https://github.com/sjwilliams/laziestloader/issues/8">Issue 8</a>.</li>
@@ -681,7 +686,7 @@ <h4>0.0.1</h4>
 
     <section>
         <h2>Credits</h2>
-        <p>LaziestLoader is by <a href="http://joshwilliams.com">Josh Williams</a>. Early versions were based heavily on Luís Almeida's <a href="http://luis-almeida.github.com/unveil/">unveil</a></p>
+        <p>LaziestLoader is by <a href="http://joshwilliams.com">Josh Williams</a>. Inspried by Luís Almeida's <a href="http://luis-almeida.github.com/unveil/">unveil</a></p>
     </section>
 
     <section>

jquery.laziestloader.js

@@ -1,5 +1,5 @@
 /** 
- * @preserve LaziestLoader - v0.5.0 - 2014-06-19
+ * @preserve LaziestLoader - v0.5.1 - 2014-06-19
  * A responsive lazy loader for jQuery.
  * http://sjwilliams.github.io/laziestloader/
  * Copyright (c) 2014 Josh Williams; Licensed MIT
@@ -96,6 +96,21 @@
       return source;
     }
 
+    /**
+     * Reflect loaded state in class names
+     * and fire event.
+     * 
+     * @param  {jQuery Object} $el
+     */
+    function onLoad($el) {
+      $el.addClass('ll-loaded').removeClass('ll-notloaded');
+      $el.trigger('loaded');
+
+      if (typeof callback === 'function') {
+         callback.call($el);
+      }
+    }
+
     /**
      * Attach event handler that sets correct
      * media source for the elements' width, or
@@ -118,14 +133,24 @@
           source = options.getSource($el);
           if (source && this.getAttribute('src') !== source) {
             this.setAttribute('src', source);
-            if (typeof callback === 'function') callback.call(this);
           }
-        } else {
-          if (typeof callback === 'function') callback.call(this);
         }
 
-        // reflect current state in classes
-        $el.addClass('ll-loaded').removeClass('ll-notloaded');
+        // Determine when to fire `loaded` event. Wait until 
+        // media is truly loaded if possible, otherwise immediately
+        if (options.setSourceMode && (this.nodeName === 'IMG' || this.nodeName === 'VIDEO' || this.nodeName === 'AUDIO') ) {
+          if (this.nodeName === 'IMG') {
+            this.onload = function() {
+              onLoad($el);
+            }
+          } else {
+            this.onloadstart = function() {
+              onLoad($el);
+            }
+          }
+        } else {
+          onLoad($el);
+        }
       });
     }
 
@@ -203,7 +228,7 @@
       }
     }
 
-    // add inital state classes, ahd check if 
+    // add inital state classes, and check if 
     // element dimensions need to be set.
     $elements.addClass('ll-init ll-notloaded').each(setHeight);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laziestloader",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Josh Williams <[email protected]>",
   "description": "A responsive-aware jQuery plugin to smartly lazy load images and other elements.",
   "repository": {