Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

first commit

  • Loading branch information...
commit d5541313935e36c79a71d2063b140394d94f4f3b 0 parents
Pedro Menezes authored
43 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>
33 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);
BIN  placeholder.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 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>
Please sign in to comment.
Something went wrong with that request. Please try again.