jQueryを利用した、画像の遅延表示

デモ

ソース

javascript

(function($) {
  $.imageLazyLoader =function(element, options) {
    var defaults = {
          count        : 0,
          invervalId   : 0,
          intervalTime : 1000,
          fedeInTime   : 500,
          target       : '.imgBox'
        }

    var plugin = this;
        plugin.settings = {}

    var $element = $(element),
        element = element;

    plugin.init = function() {
      $(defaults.target + ' img').hide();
      $(window).bind("load", function() {
    	  defaults.invervalId = setInterval(lazyLoad,defaults.intervalTime);
      });
    }

    /**
     * lazyLoad action
     */
    var lazyLoad = function() {
    	var imgNum = $('img').length;
    	if (defaults.count >= imgNum) {
    	  clearInterval(defaults.invervalId);
    	}
    	$('img:hidden').eq(0).fadeIn(defaults.fedeInTime);
    	defaults.count++;
    }
    plugin.init();
 }
 $.fn.imageLazyLoader = function(options) {
    return this.each(function() {
       if (undefined == $(this).data('imageLazyLoader')) {
          var plugin = new $.imageLazyLoader(this, options);
          $(this).data('imageLazyLoader', plugin);
       }
    });
 }
})(jQuery);

$(function () {
  $.imageLazyLoader();
});

HTML

<div class="imgArea">
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy01.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy02.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy03.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy04.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy05.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy06.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy07.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy08.gif" /></span>
<span class="imgBox"><img height="160" width="200" src="/javascript/lazyload/img/dummy09.gif" /></span>
</div>