<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://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
<span><img src="http://jqueryrain.com/200/000/fff" alt="jqueryrain" /></span>
</div>
Do an image fadein when onload using jQuery
#jquery #image #onload
#cesarnog
#jquery #image #onload
#cesarnog
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.