Add offset

README.textile

@@ -87,6 +87,28 @@ bc.. $(someMyOneDiv).bind('inview', function(e, isInView, visiblePartX, visibleP
   }
 });
 
+h2. Using offset
+
+If you use this code for lazy loading images, sometimes you are interested to preload the image when it's getting close to the view port. So you can add a offset to the target element.
+
+Add offset from 300px to all sites from the view port. Example: Your view port is 600x800 px, so the new one will be 1200x1400. All images in this area will be preloaded.
+
+```html
+<img data-offset="300">
+```
+
+Add offset from 300px to top and bottom of view port. Example: Your view port is 600x800 px, so the new one will be 600x1400.
+
+```html
+<img data-offset-top="300">
+```
+
+Add offset from 300px to left and right of the view port. Example: Your view port is 600x800 px, the new will be 1200x1400px.
+
+```html
+<img data-offset-left="300">
+```
+
 h2. How it works
 
 An interval in the background checks the position of the elements against the viewport dimensions and the scroll position.
@@ -120,4 +142,4 @@ h4. The Test Suite succeeds in the following browsers that were tested:
 h4. The Test Suite doesn't completely succeed but the demos in this repository work without problems in the following browsers:
 
 * Mobile WebKit on Android 2.2
-* Mobile WebKit on Palm Pre 1
+* Mobile WebKit on Palm Pre 1

jquery.inview.js

@@ -89,10 +89,22 @@
             elementSize   = { height: $element.height(), width: $element.width() },
             elementOffset = $element.offset(),
             inView        = $element.data('inview'),
+            offset        = 0,
+            offsetLeft    = 0,
+            offsetTop     = 0,
             visiblePartX,
             visiblePartY,
             visiblePartsMerged;
 
+        if (offset = $element.data('offset')) {
+          offsetLeft = offset;
+          offsetTop = offset;
+        } else if (offset = $element.data('offset-top')) {
+          offsetTop = offset;
+        } else if (offset = $element.data('offset-left')) {
+          offsetLeft = offset;
+        }
+
         // Don't ask me why because I haven't figured out yet:
         // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
         // Even though it sounds weird:
@@ -102,10 +114,10 @@
           return;
         }
 
-        if (elementOffset.top + elementSize.height > viewportOffset.top &&
-            elementOffset.top < viewportOffset.top + viewportSize.height &&
-            elementOffset.left + elementSize.width > viewportOffset.left &&
-            elementOffset.left < viewportOffset.left + viewportSize.width) {
+        if (elementOffset.top + elementSize.height > viewportOffset.top - offsetTop &&
+            elementOffset.top < viewportOffset.top + viewportSize.height + offsetTop &&
+            elementOffset.left + elementSize.width > viewportOffset.left - offsetLeft &&
+            elementOffset.left < viewportOffset.left + viewportSize.width + offsetLeft) {
           visiblePartX = (viewportOffset.left > elementOffset.left ?
             'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ?
             'left' : 'both');

test/index.html

@@ -5,40 +5,46 @@
     <meta charset="utf-8">
     <title>QUnit Test Suite</title>
     <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height">
-    <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
-    
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.16.0.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.4"] = $.noConflict(true);</script>
-    
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.5"] = $.noConflict(true);</script>
-    
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.6"] = $.noConflict(true);</script>
-    
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.7"] = $.noConflict(true);</script>
-    
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.8"] = $.noConflict(true);</script>
-    
-    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="../jquery.inview.js"></script>
     <script>window["jQuery 1.9"] = $.noConflict(true);</script>
-
-    <script src="http://code.jquery.com/qunit/git/qunit.js"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="../jquery.inview.js"></script>
+    <script>window["jQuery 1.10"] = $.noConflict(true);</script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="https://cdn.rawgit.com/nobuf/jQuery-version-compare-plugin/master/jquery.versioncompare.js"></script>
+    <script src="../jquery.inview.js"></script>
+    <script>window["jQuery 1.11"] = $.noConflict(true);</script>
+
+    <script src="https://code.jquery.com/qunit/qunit-1.16.0.js"></script>
+
     <script src="test.js"></script>
   </head>
   <body>
-    <h1 id="qunit-header">QUnit Test Suite</h1>
-    <h2 id="qunit-banner"></h2>
-    <div id="qunit-testrunner-toolbar"></div>
-    <h2 id="qunit-userAgent"></h2>
-    <ol id="qunit-tests"></ol>
+    <div id="qunit"></div>
   </body>
-</html>
+</html>