javascript - Fade in Ajax content after it's fully loaded - Stack Overflow

admin管理员组

文章数量:1389854

My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.

The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.

What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.

How to do that?

My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.

The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.

What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.

How to do that?

• javascript
• jquery

Share Improve this question Follow asked Dec 31, 2011 at 0:51 CodeOverloadCodeOverload 48.6k5656 gold badges133133 silver badges223223 bronze badges 2

• Have you tried anything yourself? Loading your content into a wrapper div with display: none then fading that in should work. – Bojangles Commented Dec 31, 2011 at 0:57
• @JamWaffles That's what i'm doing, But as i said the fadeIn occurs while the images and the iframes are half shown – CodeOverload Commented Dec 31, 2011 at 1:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

This will wait until all child content has finished loading:

$("#wrapperDivID").load(function (){
    // do something, e.g.
    $(this).fadeIn();
});

See .load().

In your specific case the following should work:

$('#content').load('/echo/html/',data, function() {
  alert('fired');
}); 

I would change the duration for fadeIn so that it will take little long.

 $("#content").load("getform.php"), function() {
                $(this).fadeIn(1500);  // or another bigger number based on your load time
 });

If you know what all images are going to be in the page, Preload all those images in the page where you have the div "content", so that you will save some loading time.

If you use $.ajax to get the HTML you can wrap the resulting HTML like below:

$.ajax('some/path/to.html',{
    'success':function(html){
        var result = $(html).load(function(){
            $('#content').fadeIn()
        });
        $('#content').html(result);
    }
});

jsfiddle example

another way you can do this:

$( "#content" ).fadeOut(200, function() {
    $(this).load( url, function() {
        $(this).fadeIn(200);
    });
});

change the fadeIn and Out times to whatever is good for you.

本文标签： javascriptFade in Ajax content after it39s fully loadedStack Overflow