first commit

pedromenezes · Aug 19, 2011 · d554131 · d554131
commit d554131
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,43 @@
+# jQuery lazyload
+
+jQuery lazyload makes your site faster.
+
+It loads your images only when the user scrolls down the page.
+
+## Example
+
+### Put the images that will lazy load in this way
+
+Noscript is necessary for the browsers with JavaScript off.
+
+  <pre>
+    <code>
+      &lt;img class="lazy" src="placeholder.gif" original-src="original-image.jpg" /&gt;
+      &lt;noscript&gt;
+        &lt;img src="original-image.jpg" /&gt;
+      &lt;/noscript&gt;
+    </code>
+  </pre>
+
+### Load the library
+
+  <pre>
+    <code>
+      &lt;script src="jquery.js"&gt;&lt;/script&gt;
+      &lt;script src="jquery.lazyload.js"&gt;&lt;/script&gt;
+    </code>
+  </pre>
+
+### Turn on lazyload for the selected images
+
+In this case, there is a 30px threshold, so the images will load when the fold is 30px from them. The threshold is optional.
+
+  <pre>
+    <code>
+      &lt;script&gt;
+        $(function(){
+          $('img.lazy').lazyload({threshold: 30});
+        });
+      &lt;/script&gt;
+    </code>
+  </pre>
diff --git a/jquery.lazyload.js b/jquery.lazyload.js
@@ -0,0 +1,33 @@
+(function($){
+    $.fn.lazyload = function(options){
+        var opts = $.extend(jQuery.fn.lazyload.defaults, options);
+        var elements = this;
+
+        $(window).bind('scroll', function(e){
+            loadAboveTheFoldImages(elements, opts);
+        });
+
+        loadAboveTheFoldImages(elements, opts);
+
+        return this;
+    };
+
+    jQuery.fn.lazyload.defaults = {threshold: 0};
+
+    function aboveTheFold(element, options){
+        var fold = $(window).height() + $(window).scrollTop();
+        return fold >= $(element).offset().top - (options['threshold']);
+    };
+
+    function loadOriginalImage(element){
+        $(element).attr('src', $(element).attr('original-src')).removeAttr('original-src');
+    };
+
+    function loadAboveTheFoldImages(elements, options){
+        elements.each(function(){
+            if (aboveTheFold(this, options) && ($(this).attr('original-src'))){
+                loadOriginalImage(this);
+            }
+        });
+    };
+})(jQuery);
diff --git a/placeholder.gif b/placeholder.gif
diff --git a/sample.html b/sample.html
@@ -0,0 +1,35 @@
+<html>
+  <head>
+    <style type="text/css">
+      img{height:660px;width:990px;}
+    </style>
+  </head>
+  <body>
+    <img original-src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp1.jpg" 
+         src="placeholder.gif" />
+    <noscript><img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp1.jpg"/></noscript>
+
+    <img original-src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp2.jpg"       
+         src="placeholder.gif" />
+    <noscript><img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp2.jpg"/></noscript>
+
+    <img original-src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp4.jpg"           
+         src="placeholder.gif" />
+    <noscript><img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp4.jpg"/></noscript>
+
+    <img original-src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp6.jpg"      
+         src="placeholder.gif" />
+    <noscript><img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/berlinwall/bp6.jpg"/></noscript>
+
+    <p>Photos from: <a href="http://www.boston.com/bigpicture/2011/08/remembering_the_divide.html">Remembering the Berlin Wall</a></p>
+
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+    <script type="text/javascript" src="jquery.lazyload.js"></script>
+
+    <script type="text/javascript">
+      $(function(){
+        $('img').lazyload({threshold: 100});
+      });
+    </script>
+  </body>
+</html>