jquery-appear

lazyload for any element

by ecartdk

HTML

<script src="http://jquery-appear.googlecode.com/files/jquery.appear-1.1.1.js"></script>
<!-- Content that takes up the viewable area -->
<div>Lorem ipsum...</div>

<!-- Content that appears below the fold -->
<div id="gallery">
  <div><a href="http://img2.netcarshow.com/Aston_Martin-V8_Vantage_S_2012_800x600_wallpaper_02.jpg">Image 1</a></div>
  <div><a href="http://img2.netcarshow.com/Aston_Martin-V8_Vantage_S_2012_800x600_wallpaper_01.jpg">Image 2</a></div>
  <div><a href="http://img2.netcarshow.com/Ferrari-360_Challenge_Stradale_2003_800x600_wallpaper_04.jpg">Image 3</a></div>
  <div><a href="http://img2.netcarshow.com/Ferrari-360_Challenge_Stradale_2003_800x600_wallpaper_05.jpg">Image 4</a></div>
  <div><a href="http://img2.netcarshow.com/Aston_Martin-V8_Vantage_S_2012_800x600_wallpaper_02.jpg">Image 5</a></div>
  <div><a href="http://img2.netcarshow.com/Aston_Martin-V8_Vantage_S_2012_800x600_wallpaper_01.jpg">Image 6</a></div>
</div>

JavaScript

$(document).ready(function() {
  $('#gallery div').appear(function() {
    var a = $(this).find('a');
    $(this).html('<img src="' + a.attr('href') + '" title="' + a.text() + '" />');
  });
});