Random image fadein onload

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $("img").hide();
  var speed = 200; //speed in ms

   $(window).load(function() {
      $("#content img").hide();
      timer= setInterval(function(){
      $notLoaded = $("#content img").not(".loaded");
      $notLoaded.eq(Math.floor(Math.random()*$notLoaded.length))
     .fadeIn()
     .addClass("loaded");
  if ($notLoaded.length == 0) {
     clearInterval(timer);
  }
}
, speed);

});

});

</script>

<style>

 #content span {
    width: 200px; height: 200px; display: block; float: left;
 }

</style>

<div id="content">
 <span><img src="http://dummyimage.com/200/000/fff" alt="irreverent" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="irreverent" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="irreverent" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
 <span><img src="http://dummyimage.com/200/000/fff" alt="intriguing" /></span>
</div> 

Leave a Reply