views:

54

answers:

2

can ny one suggest how to do show image loading gif when image is loading in runtime using jquery.

A: 

See this article in jQuery for Designers.

kgiannakakis
hey thanks for ur reply... i referred this tutorial.. but the problem is on my click m just displaying my current image in other div m not appending it to the div. and in this example which u suggested they are appending the element. soo m geting confused. der.
mehul9595
A: 

As an additional option to the article posted, you could bind to the ajax function (if you are using ajax). Here is an example of how I do this in my apps (it works great).

function AddAjaxLoader(DivObject, Message) {
if (Message === undefined || Message === "") { Message = "Loading..."; }
var loader = $("<span />", {
    'class': 'ajaxLoading',
    html: '<span class="ajaxLoadingIcon">&nbsp;</span><span>' + Message + '</span>'
});

$(DivObject).hide().after(loader);

loader.ajaxComplete(function () {
    $(this).fadeOut('fast', function () {
        $(DivObject).show();
        $(this).remove();
    });
});
}

and the CSS:

.ajaxLoadingIcon
{
    padding:9px;
    background: url(../Images/Icons/16_ajax-loader.gif) no-repeat left center;
}

Or without ajax...

function AddLoader(DivId) {
    $("#" + DivId).html('<div class="ajaxBlock"><span class="ajaxLoadingIcon">&nbsp;</span> Loading...</div>');
}
Zacho
sorry brother i dont no ajax u know any method using javascript or jquery
mehul9595
No problem, you will just have to set and remove the loader manually. See edited answer.
Zacho