Visibility now watches for images loading and automatically refreshes afterward

src/definitions/behaviors/visibility.js

@@ -44,7 +44,7 @@ $.fn.visibility = function(parameters) {
         $window         = $(window),
         $module         = $(this),
         $context        = $(settings.context),
-        $container      = $module.offsetParent(),
+        $images         = $module.find('img'),
 
         selector        = $module.selector || '',
         instance        = $module.data(moduleNamespace),
@@ -130,6 +130,38 @@ $.fn.visibility = function(parameters) {
             $context
               .on('scroll' + eventNamespace, module.event.scroll)
             ;
+            if($images.length > 0) {
+              module.bind.imageLoad();
+            }
+          },
+          imageLoad: function() {
+            var
+              imageCount    = $images.length,
+              index         = imageCount,
+              loadedCount   = 0,
+              images        = [],
+              cache         = [],
+              cacheImage    = document.createElement('img'),
+              handleLoad    = function() {
+                loadedCount++;
+                if(loadedCount >= imageCount) {
+                  module.debug('Images finished loading inside element, refreshing position');
+                  module.refresh();
+                }
+              }
+            ;
+            $images
+              .each(function() {
+                images.push( $(this).attr('src') );
+              })
+            ;
+            while(index--) {
+              cacheImage         = document.createElement('img');
+              cacheImage.onload  = handleLoad;
+              cacheImage.onerror = handleLoad;
+              cacheImage.src     = images[index];
+              cache.push(cacheImage);
+            }
           }
         },
 
@@ -153,33 +185,6 @@ $.fn.visibility = function(parameters) {
           }
         },
 
-        precache: function(images, callback) {
-          if (!(images instanceof Array)) {
-            images = [images];
-          }
-          var
-            imagesLength  = images.length,
-            loadedCounter = 0,
-            cache         = [],
-            cacheImage    = document.createElement('img'),
-            handleLoad    = function() {
-              loadedCounter++;
-              if (loadedCounter >= images.length) {
-                if ($.isFunction(callback)) {
-                  callback();
-                }
-              }
-            }
-          ;
-          while (imagesLength--) {
-            cacheImage         = document.createElement('img');
-            cacheImage.onload  = handleLoad;
-            cacheImage.onerror = handleLoad;
-            cacheImage.src     = images[imagesLength];
-            cache.push(cacheImage);
-          }
-        },
-
         should: {
           trackChanges: function() {
             if(methodInvoked && queryArguments.length > 0) {