Thursday, 24 January 2013 13:56

how to show progress before image loading using jquery

Written by 
Rate this item
(1 Vote)

this post will show how to implement image loader in any page.
basically i will show a loading image per image before image
is loaded completely in the page.

codes in the page where we want the images to be loaded.
i used list -

<ul id="image_ul">
<li class="loading"></li>
<li class="loading"></li>
</ul>

add some style in style section-

<style type="text/css">
#image_ul { margin:0; padding:0; }
#image_ul li { float:left; margin:0; width:250px; height:250px; list-style:none; }
#image_ul li.loading { background: url(/images/loader.gif) no-repeat center center; }
</style>

in the header section -

<script type="text/javascript">
$(function () {
//image sources
var images = new Array();
images[0] = 'http://feedjit.com/images/bflags/bd.gif';
images[1] = 'http://live.feedjit.com/images/logos/feedjit32Dark.png';

// loop through matching element
$("ul#image_ul li").each(function (index, el) {
// new image object
var _img = new Image();
// image onload
$(_img).load(function () {
// hide first
$(this).css('display', 'none');// for safari
//
$(el).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
$(el).remove();
}).attr('src', images[index]);
});

});

</script>

if you like it, don't forget to share and like

Read 1879 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments