Flash Effect Image Loading with Jquery

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.

CODE

<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” alt=”” />
<img src=”2.jpg” alt=”” />
<img src=”3.jpg” alt=”” />
<img src=”4.jpg” alt=”” />
</div>

Permanent link to this article: https://blog.openshell.in/2011/01/flash-effect-image-loading-with-jquery/

Leave a Reply

Your email address will not be published.