Wait for image full load on ajax action

Question

On my page there is ajax action, which loads div, that contain image on left and text on right.

The problem: first of all text loads, and on the left (it aligned left), then image loads, text shifts on right, and that looks really not smooth.

I tried something like :

$('div#to_load').ready(function() {
    $('div#to_load').fadeIn();
});

but that doesn't help.

What can I do?

same issue here http://stackoverflow.com/questions/17384286/jquery-dynamically-download-image-ie-doesnt-know-its-width-and-its-height — mkutyba, Jul 20 '13 at 11:05

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

Update

I think you have to try this trick found here :

$("<img />", { src:"thelinkofyourimage"}).appendTo("div#to_load").fadeOut(0).fadeIn(1000);

Have a look to this fiddle : http://jsfiddle.net/qYHCn/.

edited May 23 '17 at 12:08

Community

1
1

answered Jul 20 '13 at 10:48

Lucas Willems

6,673
4
28
45

Did you read the documentation you're linking to? It says "Load data from the server ..." ? – adeneo Jul 20 '13 at 10:50
How would fading in an image solve the issue with the text being shifted once the image loads ? – adeneo Jul 20 '13 at 10:51
I will explain better my answer. – Lucas Willems Jul 20 '13 at 10:54
1

@adeneo I think there are rudeless way to tell people that are doing something wrong. – steo Jul 20 '13 at 10:54
@LucasWillems The idea is right, but ain't gonna work, paste this in your console here (your loading binary data into a div) : ``$("#answer-17761449").load("https://www.gravatar.com/avatar/fd2eaacae1fcf0fdf7956df4ea15cdab?s=32&d=identicon&r=PG")`` – Robert Hoffmann Jul 20 '13 at 10:54
2

@adeneo do you have a suggestion regards the handling of the problem? – Toiletduck Jul 20 '13 at 10:55
@LucasWillems: Is your new solution waits for image loading? I think NO – frogatto Jul 20 '13 at 11:01
@steo - when was I being rude, I asked two legitimate questions as the answer got two upvotes and wasn't even close to solving the issue ? – adeneo Jul 20 '13 at 11:10
And this still isn't an answer, if the text shifts once the images are inserted, fading it in won't make a difference. Now the text will shift, an empty space will appear, and an image will fade in, not much better ? – adeneo Jul 20 '13 at 11:12
@LucasWillems, actually your answer in first edit was absolutely correct. It works for me ( i mean using load with callback) – Joe Half Face Jul 23 '13 at 15:41

score 0 · Answer 2 · answered Jul 20 '13 at 10:54

You could track when all the images have loaded like so

var element = $('div#to_load');
var images = element.find('img');
var count = images.length;

for( var i = 0; i < count; i++) {
   $(images[i]).load(function(){
     count--;
     if( count === 0 ){
        element.fadeIn();
     }
   });
}

Janith Chinthana · Answer 3 · 2013-07-20T11:07:22.483

0

Try to load image and text separately, not at once.

And for the shifting problem put image inside another div and define the size when it loads. Then text can't come to image space since we already giving space for image div.

sample code

$('#ImageID')
 .load(
      function(){
           //Do stuff once the image specified above is loaded
           $('#textId').html('your text');
      }
 );

edited Jul 20 '13 at 11:07

answered Jul 20 '13 at 10:58

Janith Chinthana

3,792
2
27
54

How do you load text? – iConnor Jul 20 '13 at 11:00
Would that not be wasting time? – iConnor Jul 20 '13 at 11:08
If so you can load text seperatly, but we need to define the size of image div. – Janith Chinthana Jul 20 '13 at 11:13

Robert Hoffmann · Answer 4 · 2013-07-20T11:27:25.697

If you don't want content to shift, you must declare the size the image will take up so that the required space is already accounted for when the browser does it's render.

Make sure you declare the size of the image, or the size of the container before you load

<div id="to_load">
    <img src="...." height="400" width="400" />
</div>

or

<div id="to_load" style="height:400px;width:400px;overflow:hidden">
    ..dynamic content
</div>

Declaring image size either on the img element or in your stylesheet is a best practice recommendation anyways

Reflows & Repaint

Maybe you'd like something like this

#to_load {
    width: 523px;
    height: 192px;
}
#to_load img {
    display: none;
}

setTimeout(function() {
    $("<img />", { src:"http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png"})
        .on('load', function(){
            $(this).appendTo("#to_load").fadeIn(500);
        });
},1000);

http://jsfiddle.net/AWntU/

score 0 · Answer 5 · answered Jul 20 '13 at 11:04

You could smoothly animate it in with jQuery (handy anyway when you are doing your ajax requests with jQuery):

jQuery

$("body").prepend('<img src="http://placehold.it/150x150" alt="img">');
$("img").animate({
    opacity: 1,
    left: 0
}, 700);

CSS

img {
    float: left;
    margin-right: 0.8em ; 
    left: -300px;
    position: relative;
}

Fiddle.

Wait for image full load on ajax action

5 Answers5