CODEWITHSUNDEEP
javascriptjquery
CodeOverload
CodeOverload

Reputation: 48465

Fade in Ajax content after it's fully loaded

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?

Upvotes: 4

Views: 7523

Answers (4)

Derek
Derek

Reputation: 859

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.

Upvotes: 0

calebds
calebds

Reputation: 26228

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

Upvotes: 1

Shyju
Shyju

Reputation: 218722

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.

Upvotes: 1

subhaze
subhaze

Reputation: 8855

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

Upvotes: 0

Related Questions