showing a preloading gif until the image is fully loaded?

Question

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

score 4 · Accepted Answer · answered Mar 25 '11 at 16:34

4

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.

answered Mar 25 '11 at 16:34

whoughton

1,395
11
21

Can I attack an onload event with jquery? yes with .load(); – dynamic Mar 25 '11 at 16:36
@yes123, I don't think so, the 'ready' event in jquery is based on the entire page content being ready and the 'init' event is based on the page loading before the images etc are downloaded. – Brian Scott Mar 25 '11 at 16:37
1

You can try $("img").load() which does have issues when an image is cached in IE. There's also "ahpi.imgload.js" which is a "special load event" to fix the cached image problem... so really, the answer is to slightly tweak the ahpi script to "$.event.special.cacheload" instead of "$.event.special.load" to avoid the cache-recursion loop, and apply to your images with $("img").bind("cacheload",function...) (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) – potench Mar 25 '11 at 16:42
aww i didn't about this for IE. Shouldn't jquery.load solve this issue automatically? – dynamic Mar 25 '11 at 16:44

score 2 · Answer 2 · answered Feb 20 '14 at 03:50

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;
}

score 2 · Answer 3 · edited Mar 25 '14 at 19:12

2

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

edited Mar 25 '14 at 19:12

iMatoria

1,450
2
19
35

answered Mar 25 '11 at 17:02

Jayme Tosi Neto

1,189
2
19
41

HMM append inside an img? How can that work xD +1 because it's the most similar thing i need – dynamic Mar 25 '11 at 17:05
Yeah! You're right! Instead of append, it must be after! huahuahuahu I'll correct it ;D – Jayme Tosi Neto Mar 25 '11 at 17:16
It can be $.before too, anyway. ;) Oh! Another thing you could do is making you img transparent (css opacity:0.3 for example) and put a floating ajax.gif over it, but I think it's harder to implement. However, good luck! – Jayme Tosi Neto Mar 25 '11 at 17:27

score 1 · Answer 4 · answered Mar 25 '11 at 16:35

1

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;
}

answered Mar 25 '11 at 16:35

quis

1,120
2
8
15

I don't think this will work as excepted. the image will load up to the animation – dynamic Mar 25 '11 at 16:39
1

Although I see your point that the image will be visible while it's loading, which might not be what you want. – quis Mar 25 '11 at 18:02

score 0 · Answer 5 · answered Mar 25 '11 at 17:54

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();
    });

showing a preloading gif until the image is fully loaded?

5 Answers5