Ajax: fade in new content only if its fully loaded

Question

I don't know if this technique is wrong but I really only want the new content to be faded in when it's full loaded. It seems like beforeSend and complete send has no effect in timing. The new content will just fade in even before the slide up has happened,f.e..

I'm not yet quite familiar with ajax you must know.

Here is my code:

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function() {    
                $(".menue").slideUp();
            },
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $('#content').html(html);

            },
            complete: function(){
                $("#content").fadeIn(); 
            }
        });
    }

    $('nav a').live('click', function(e){
        history.pushState(null, null, this.href);   
        replacePage(this.href);
        e.preventDefault();
    $("#content").hide();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

Thank you for your quick reply. But still the same. The new content will already fade in before the menue has even slided up. — Melros, Jul 22 '12 at 03:20

Ram · Accepted Answer · 2012-07-22T04:11:07.493

3

Try the following:

success: function(data){
           var dom = $(data);
           var html = dom.filter('#content').html();
           $(".menue").promise().done(function(){
                $('#content').html(html).fadeIn()
           })
        },

or you can use slideUp()'s callback function which executes after animation is complete:

$(".menue").slideUp('slow', function(){
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        success: function(data){
            var dom = $(data);
            var html = dom.filter('#content').html();
            $('#content').html(html).fadeIn()
        }
    });
 })

note that live() is deprecated and you can use on() method instead.

edited Jul 22 '12 at 04:11

answered Jul 22 '12 at 03:24

Ram

143,282
16
168
197

Wow, I didn't know about that one! Very cool and seems to work well so far. But I always encounter that the fadeIn is not always performed perfectly and it flickers like there is still a bit to load. Could third party tools like soundcloud player inside the loaded content affect the fadeIn? And how can I really be sure that nothing happens before the beforeSend is not completed? The menue should slide up first and then the content can load as much as it has to but it should only appear when the menue has slided up. I thought beforeSend would do that but actually it does not. Do I use it wrong? – Melros Jul 22 '12 at 03:37
beforeSend is an ajax event and hide() and slideUp() are animation methods, you can use callback function of slideUp, like `$(".menue").slideUp(function(){$.ajax()})` which first slides the menu and then start to send the ajax request – Ram Jul 22 '12 at 04:12
Thank for the addition info. But I have to come back at this. The new content is sometimes still just flashing in. I tried it without any third party content in there (like soundcloud, vimeo) and then it works just as it should. My question: Is there a simple way to say that all third party tools should be within the "fully loaded" preload or is this much more complicated to handle this? COuld you give me hint to a direction? – Melros Jul 22 '12 at 05:11
@Melros as you say this can be complicated and depends on how third party scripts work. You have posted another question, I have posted another answer there, have you tried that? – Ram Jul 22 '12 at 05:15
Yes, perfect your other answer! Thank you! So there is nothing that can make sure that third party content is also loaded completely within the ajax call? Like the easy way? Or what direction should I look at? – Melros Jul 22 '12 at 05:20
@Melros you are welcome, it depends how they are loaded and how they work. – Ram Jul 22 '12 at 05:24
Ok, in this Case it's just a video from vimeo where I guess I can do quite nothing about(?). And a javascript plugin from soundcloud which I guess I could do something about. But just that last question to keep it simple: Is there any topic I can google about it to get near a solution? Or I guess I should just open another question!? – Melros Jul 22 '12 at 05:31
@Melros I think the best thing that you can do is reading their api regarding how they work. – Ram Jul 22 '12 at 05:35
Ok, just for the record: It's the embed iframe from vimeo which causes the heavy latency and flickering. I just removed it an everything works perfect even with the soundcloud script. So I'll look for a vimeo solution that way too now – Melros Jul 22 '12 at 05:54

j08691 · Answer 2 · 2012-07-22T03:25:15.803

1

Change the success function in your ajax call to:

success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();
                $('#content').html(html).hide().fadeIn();
            },

Remember to remove the fadeIn() from the complete call.

edited Jul 22 '12 at 03:25

answered Jul 22 '12 at 03:19

j08691

204,283
31
260
272

1

Also, you should use `.on()` as opposed to `bind()` and `live()`, which are set to be depricated. http://stackoverflow.com/questions/2690370/live-vs-bind – Austin Jul 22 '12 at 03:24

Ajax: fade in new content only if its fully loaded

2 Answers2

Linked