CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anon
anon

Reputation:

showing a preloading gif until the image is fully loaded?

I have this html: <img src="myimage.jpg" id="idimg">

Is there a way with javascript to change that src to my ajax.gif until the image is fully loaded?

Please note i have already watched here: How to display a wait gif until image is fully loaded

but i don't want that because I want my initial html to be as I wrote there (with the src of the original image) and not with a fake div container

thx

Upvotes: 1

Views: 5949

Answers (5)

Jayme Tosi Neto
Jayme Tosi Neto

Reputation: 1239

In jQuery you could do something like this:

 $('your_img_selector').attr('src', 'ajax.gif'); //just change your img by the ajax.gif without any treatment

 var img = $(new Image()); //create a new jQuery image object
 img.load(function()
 {
     $('your_img_selector').after(this); //append the new object to your img
     $('your_img_selector').remove(); //remove your img, so it continue as if as your img was simply changed ;)
 }).attr('src', 'the_image_you_want_to_be_shown_after_ajax_loading');

I didn't test this code, but that is one idea I've implemented on a system, so I know it works ;) I don't know how to do in pure javascript, but I think it's not too different from this. At least the idea ;)

It hopes to be useful! :D

Upvotes: 2

user3330970
user3330970

Reputation: 21

Suposing that there is an image loading.gif in the 'Imagens' folder on the root.

js:

$('img').css('opacity', function () {
    $(this).wrap("<div class='img-loading'></div>")
    return '0';
}).load(function () {
    var img = $(this);
    $(this).unwrap();
    $(this).animate({
        opacity: 1
    }, 500);
});

css

.img-loading {
    background: url('/Imagens/loading.gif') 50% 50% no-repeat;
}

Upvotes: 2

Mr. Smee
Mr. Smee

Reputation: 960

not sure if this is what you wanted but I think its pretty useful anyway. The code below will fade the load class in and out when loading Ajax.

$('.load').ajaxStart(function () {
        $(this).fadeIn();
    });
    $('.load').ajaxStop(function () {
        $(this).fadeOut();
    });

Upvotes: 0

quis
quis

Reputation: 1190

Set the background property of the <img> tag in CSS to be your loading GIF. You will need to set the width and height on the image for this to work properly. E.g.:

HTML

<img src="yourBigImage.jpg" width="1200" height="800" />

CSS

img {
    background: url("loading.gif") 50% 50% no-repeat;
}

Upvotes: 1

whoughton
whoughton

Reputation: 1385

Using the same theory, you could have 2 images in the HTML source, one as the ajax.gif loader, and one as the actual image you are planning to show. Using css make sure only the loader displays on page load, and then attach an onload event to the actual image. When it is triggered you could then fade between the two.

This being said, I am not sure of the compatibility of an image onload event in IE off of the top of my head.

Upvotes: 4

Related Questions