@beatak
 

jQuery.imageloader()

lets you have granular controls of image loading timing

View project on GitHub Download latest

 

Exmples

if you just want to load image lazily: 

<img class="lazy-img" src="assets/0.png" data-src="assets/img1.jpg" />
<img class="lazy-img" src="assets/0.png" data-src="assets/img2.jpg" />
<img class="lazy-img" src="assets/0.png" data-src="assets/img3.jpg" />
<script>
  $(function() {
    $('.lazy-img').imageloader();
  });
</script>
<style type="text/css">
  .defferred-block { display: none; }
</style>
<div class="deffered-block">
  <img class="defferred" src="assets/0.png" data-src="assets/img1.jpg" />
  <img class="defferred" src="assets/0.png" data-src="assets/img2.jpg" />
  <img class="defferred" src="assets/0.png" data-src="assets/img3.jpg" />
</div>
…
<script>
  $(function() {
    $('.deffered-block').imageloader(
      {
        selector: '.defferred',
        callback: function (elm) {
          $(elm).slideDown();
        }
      }
    );
  });
</script>

If you have multiple images lasily loaded with a height-required action.

You can load images to background as well.

 
 
 
<style type="text/css">
  .my-square-image { display:none; width: 50px; height: 50px; float: left; }
</style>
<div class="clearfix">
  <div class="my-square-image" data-src="assets/img1.jpg">&nbsp</div>
  <div class="my-square-image" data-src="assets/img2.jpg">&nbsp</div>
  <div class="my-square-image" data-src="assets/img3.jpg">&nbsp</div>
</div>
<script>
  $(function() {
    $('.my-square-image').imageloader(
      {
        background: true,
        callback: function (elm) {
          $(elm).fadeIn();
        }
      }
    );
  });
</script>
<div class="each-img-block">
  <img class="each-img" src="assets/0.png" data-src="assets/img1.jpg" />
  <img class="each-img" src="assets/0.png" data-src="assets/img2.jpg" />
  <img class="each-img" src="assets/0.png" data-src="assets/img3.jpg" />
</div>
<script>
  $(function() {
    $('.each-img-block').imageloader(
      {
        selector: '.each-img',
        each: function (elm) {
          console.log(elm);
        },
        callback: function (elm) {
          $(elm).fadeIn();
        }
      }
    );
  });
</script>

For each image gets loaded, it fires a function.

If you click the buttons below, it will open a popup window with pages that have several images. If you load all images out of on window.onload and jQuery.imageloader lazy load how different it would be?

(note: every page load of this page, JavaScript fetches different pictures from Flickr, 500px and imgur. But still this is affected by cache, obviously. Try reload the page a few times.)


All at once
window.onload
(all image loaded): 		  Milli-Second
jQuery.imageloader()
window.onload:   Milli-Second
(all image loaded):   Milli-Second
 

FAQ

Who is using this?
Meetup is using this.
Why I wanna use this?
Because it is designed to be flexible, memory less intensive, cleaning up all after done, and using a singleton queue mechanism so that it won't overwhelm browser UI thread.
 

Documentation

The instance option as follows:

Name Type Default Description
selector string (empty string) Selector for the elements that $.fn.imageloader() will look for in order to load the image. If the empty string is passed, $.fn.imageloader() will try to load the image on "this" object.
dataattr string "src" Data attribute for the elements that $.fn.imageloader() will look for. As default, $.fn.imageloader() will look for data-src attribute.
background boolean false true if you want to load image as background-image css.
callback function null Callback function when the image is loaded. "this" is passed as the first argument. See Examples above.
timeout number 5000 Millisecond for loading timeout.

There is also a global option:

Name Type Default Description
$.imageloader.queueInterval number 17 A browser can only issue parallel HTTP requests 2 to 9 for each domain name as a default (according to Browserscope, May 2012). When you try to load massive numbers of images all at once, it can consume all browser's UI thread. So $.fn.imageloader() is using a time-domain queue for controling loading timing. 17 millisecond is a one frame delay under 60fps. As default, when you apply $.fn.imageloader() to numbers of elements, it will make <img> elements every 17 milliseconds.