完全加载后淡入Ajax内容

Question

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?

Answer 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');
}); 

Answer 2

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.

Answer 3

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.

Answer 4

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