Flash Effect Image Loading with Jquery.
Wall Script
Wall Script
Sunday, May 16, 2010

Flash Effect Image Loading with Jquery.

How to load images with flash effect using jquery. It is very useful script to loading images with nice effect on your web projects and also simple just seven lines of code. Use it and enrich your web page. Thanks!


Live Demo



Javascript and HTML Code
I had implemented this on labs.9lessons home page.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$('#imagesdiv img').clone().appendTo($('#imagesdiv'));
$('#imagesdiv img').each(function()
{
var me = this;
$(this).hide()
var j = i;
setTimeout(function()
{
$(me).fadeIn(1000);
}, i)
i += 100
});
});
</script>
//HTML Code
<div id="imagesdiv">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />

<div/>
web notification

14 comments:

  1. Dont you wanna add some css rules to hide the images, like for example #imagesdiv img { display:none } ?
    Now they're visible before $(document).ready(); kicks in..

    Cool thing besides that!!

    ReplyDelete
  2. Hi Srinivas,

    Your example is cool, though I am looking for some jquery driven 'spiral loading' animation. Something that would be more interesting than the ordinary ajax-loader. Do you have an idea how this can be done?

    ReplyDelete
  3. nice example thank you

    ReplyDelete
  4. Your demo site is so slow for me that I can not see the effect.

    But thanks for sharing anyway :)

    ReplyDelete
  5. Hi, nice tutorial, but you have a duplicate photo, if you cancel this string $('#imagesdiv img').clone().appendTo($('#imagesdiv'));
    the images will not be duplicate anymore...

    ReplyDelete
  6. hello, i have a question.

    Then I am using this script i get every image spacing, but i want to make images without spaces, what code i need to include ? thanks

    ReplyDelete
  7. Seriopusly great piece of code. A client has literally just asked me to replicate this effect they saw on an all Flash site.

    ReplyDelete
  8. setTimeout(function(){$(me).fadeIn(1000)}, i);
    instead
    $(me).delay(i).fadeIn(1000);
    be written..

    Thanks for sharing :)

    ReplyDelete
  9. it didn't work with opera,but it was fine with chrome

    ReplyDelete
  10. how to prevent user from saving image

    ReplyDelete

mailxengine Youtueb channel
Make in India
X