loading images via ajax call and meanwhile show loader image

Question

just starting to learn the Ajax() function within jquery. trying to make a widget where image loader will appear until the images are loaded from server.

I want to apply the same for all the images comes in these li's.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    li { padding: 10px; }
    ul.imageList li .pics { height: 50px; width:50px; }
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
    $('document').ready(function() {
        $('#click').click(function(event) {
            event.preventDefault();
            $(".imageList li").html('<img src="http://deltaplanveter.ru/app/webroot/img/loader.gif" />');
            $(".imageList li").load('1.png');
        });
    });
</script>
</head>
<body>
<div class="images">
    <ul class="imageList">
        <li><img src="1.png" class="pics" /></li>
        <li><img src="2.png" class="pics" /></li>
        <li><img src="3.png" class="pics" /></li>
        <li><img src="4.png" class="pics" /></li>
    </ul>
    <a href="#" id="click">Show Images</a>
</div>
</body>
</html>

Please check my live code here http://jsfiddle.net/ylokesh/cZ6F7/

Thanks ! Lokesh Yadav

Tarun Gupta · Accepted Answer · 2013-05-07 16:47:14Z

2

$('#loadingDiv').hide()  // hide it initially
      .ajaxStart(function () {
        //alert('started');

        $('#loadingDiv').show();
       })
      .ajaxStop(function () {
       //alert('stoped');

        $('#loadingDiv').hide();
    });

<span id="loadingDiv"><img src="images/ajax-loader.gif" alt="Loading..."></span>

answered May 7, 2013 at 16:47

Tarun Gupta

6,4112 gold badges44 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boris Guéry · Accepted Answer · 2011-03-01 11:40:15Z

0

If your image <img> element is present with a defined src attribute, there won't be any ajax/lazy-loading because, most browsers will load <img> even if they are :invisible.

However, you can use do something like that:

$(document).ready(function() {
    $('img').hide();//hide all the images on the page
});

var i = 0;
var interval=0;
$(window).bind("load", function() {
    var interval = setInterval("doThis(i)",100);
});

function doThis() {
    var images = $('img').length;
    if (i >= images) {
        clearInterval(interval);
    }
    $('img:hidden').eq(0).fadeIn(100);
    i++;
}

And use a css rules to show the loader:

#gallery li a {
    background: url("/images/ajax-loader.gif") no-repeat scroll 50% 50% #EEEEEE;
}

Example on jsfiddle

Edit:

If you want to use Ajax to load your image, then you can trigger your loader image on Ajax Start event.

It your work best if you use a global container with a modal loader for example, but can also works with your specific case.

Example:

var $loader = $('<div />').attr('id', 'loader');
var $spinner = $('<img />').attr('src', '/images/ajax-loader.gif')
    .attr('alt', 'Loading');
$loader.append($spinner);
$('body').children().last().after($loader);

$('body').ajaxStart(function() {
       $loader.show();
    }).ajaxComplete(function() {
       $loader.hide();
    });

And the according css:

 #loader {
    background:
        url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png")
        repeat scroll 50% 50% #666666;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: fixed;
    top: 0;
    width: 100%;
 }

  #loader img {
    left: 45%;
    position: relative;
    top: 50%;
  }

Example

edited Mar 1, 2011 at 11:40

answered Mar 1, 2011 at 11:03

Boris Guéry

47.6k8 gold badges56 silver badges88 bronze badges

3 Comments

Lokesh Yadav Over a year ago

thanks Boris, your code works for me. Can't we place $(ajax()) to fetch the images from server and then append the container with original image by removing the loader image'

Boris Guéry Over a year ago

Sure you can use Ajax to load your image, check my updated answer.

Lokesh Yadav Over a year ago

okay. I am trying google to find any relevant website to get idea for exactly.. how to implement this kind of scenario with Ajax. If you have any website url which can provide some insight .. please share :)

Collectives™ on Stack Overflow

loading images via ajax call and meanwhile show loader image

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related