Jquery .load & .html Loader time Issue

Question

Another issue I seem to be having is with Jquery again. I'm basically loading in content from external php pages, by using the .load function. This works fine, the only issue I have is the load just flashes in and out, so it doesn't look very good.

Is there anyway to get the loader to display for longer, or at least a min amount of time?

Here's the code I currently have:

 $('#content').load('contact.php');
        $('#test a').click(function() {
        var page = $(this).attr('href');
        $("#mydiv").html('<div class="bar"><span></span></div>');
        $('#content').load(''+ page +'.php', null, function() {
    $("#mydiv").html('');
   });
    return false;
});

Any help or guidance would be great :)

The following did not work :

<script type="text/javascript">
    $(document).ready(function() {

    setTimeout(function () { 

    $('#content').load('contact.php');


    $('#test a').click(function() {

    var page = $(this).attr('href');

        $("#mydiv").html('<div class="bar"><span></span></div>');
    $('#content').load(''+ page +'.php', null, function() {
    $("#mydiv").html('');
    });

    return false;

        }); 

    }, 2000);

});
</script>

I would recommend .ready instead of .load as there are no images in the code i m assuming. — Dhruvenkumar Shah
– Dhruvenkumar Shah, Commented Aug 24, 2012 at 20:40
@DhruvenkumarShah this is not the load event listener, jquery has a shorthand for loading content to a div using AJAX. — sabithpocker
– sabithpocker, Commented Aug 24, 2012 at 20:46

Hanlet Escaño · Accepted Answer · 2012-08-24 20:38:08Z

2

<script>
    setTimeout(function () { 
        //Do it here
    }, 2000);
</script>

I would not make an user wait one minute though. Modify the 2000 to whatever time you want.

Good luck.

answered Aug 24, 2012 at 20:38

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

HireLee Over a year ago

Thanks for the reply Hanlet, Although this seemingly didnt make a difference... Strange... It still seems to just show the loader for a second... nothing more... could it be becae im using $(document).ready() ?

Hanlet Escaño Over a year ago

Wrap the entire thing inside of the setTimeout.

sabithpocker Over a year ago

If OP has #mydiv inside #content this might not work, as the call back is after inserting processed response code into #content.

HireLee Over a year ago

This still doesnt work, when the page loads it dispaly the .load('contact.php') after 2000 doesnt work for selecting the other pages, to display the loader and then proceed with the content.

sabithpocker Over a year ago

@LeeMarshall do you have #mydiv inside #content?

|

Ricardo Souza · Accepted Answer · 2012-08-24 23:33:54Z

2

You can call a setTimeout to hide the loader when it has finished loading and display the content:

setTimeout(hideLoaderShowContent, 1000); // 

function hideLoaderShowContent() {
    $("#loader").hide();
    $("#content").show();
}

Edit: This is what you are needing as requested:

var $mydiv = $("#mydiv");

$mydiv.html('<div class="bar"><span></span></div>');

$('#content').load(''+ page +'.php', null, function() {
    setTimeout(function() { $mydiv.html(''); }, 1000); // Note the setTimeout here waits 1 second (1000 ms)
});

edited Aug 24, 2012 at 23:33

answered Aug 24, 2012 at 20:42

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

2 Comments

HireLee Over a year ago

Hi rcdmk, how would i implement this from my stated above code, i cant seem to work it out.

Ricardo Souza Over a year ago

I've updated my answer, but think you have already worked it out.

Collectives™ on Stack Overflow

Jquery .load & .html Loader time Issue

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related