How To Make Flash Effect Image Loading With Jquery

by
Image loading flash effects are more popular for a web designer to create a new website or blog. So, in this tutorial, I will show you how to load an image with flash effect using Jquery. If you wish to load your image with nice and attractive effect then this is a very useful script for you to make it.

 You can use this simple but essential codes in your web projects. Use the code and make your web page looking pretty good.
Read Also:
1. Make A Simple Java Table Program (With Example Code)
2. How To Make Chatting Application with Jquery and Ajax
3. How To Make A Calculator With Easy Codes In Notepad

Flash Effect Image Loading With Jquery Codes


 Javascript and HTML Code Appear Below;

I had implemented this on my another blog’s 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/>

These are the codes for creating the flash effect in the image when it will be loading. If you have any problem to solve it ask me via the comment section. Was this article helpful? then share in social media with your nearby friends.

Leave a Comment