CODEWITHSUNDEEP
jqueryloadloadingsequence
itsMe
itsMe

Reputation: 633

Is there a way to load page in sequence with Jquery?

I have a long scrolling page, so i want to load contents of the page in sequence.

<div id="one">one.php</div>
<div id="two">two.php</div>
<div id="three">three.php</div>

on page load, i want to load content of only DIV id ONE, after that DIV id TWO then DIV id THREE.. and so on..

How do i achieve that? I created 3 files (one.php, two.php, three.php) tried .load() but i am not able to make a sequence. Please help!

Upvotes: 2

Views: 2004

Answers (6)

Karol
Karol

Reputation: 8053

You need to use ajax. This method allows you to specify what will happen on success. So once you will load first div's contents, in success handler load second div's contents and so on. Something like this:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

$.ajax({
    url: 'div1.html',
    type: "GET",
    dataType: "html",
    success: function (response) {

        $("#div1").html(response);

        $.ajax({
            url: 'div2.html',
            type: "GET",
            dataType: "html",
            success: function (response) {

                $("#div2").html(response);

                $.ajax({
                    url: 'div3.html',
                    type: "GET",
                    dataType: "html",
                    success: function (response) {
                        $("#div3").html(response);
                    }
                });

            }
        });

    }
});

But remember - it will not work with local files - you need to set up some web server, as at least Chrome doesn't want to load local resources via ajax. Of course there is a way to change Chrome options but I wouldn't play with it.

Upvotes: 2

Swarne27
Swarne27

Reputation: 5747

Try using, jQuery.load();,

$("#one").load("../content1.php", function() {
  $("#two").load("../content2.php", function() {
    // likewise
  });
});

Upvotes: 4

SuperFunMan
SuperFunMan

Reputation: 175

Option 1
Use setTimeout

setTimeout(function() {
        $("#one").show();
    }, 1000);
setTimeout(function() {
        $("#two").show();
    }, 2000);
setTimeout(function() {
        $("#three").show();
    }, 3000);

Option 2
Function 2 Function Transition.

$(document).ready(function() {
$("#one").show();
showTwo()
});

function showTwo()
{
$("#two").show();
showThree()
}

function showThree()
{
$("#Three").show();
}

NOTE: For both, you need to first hide them onload. To do this, use the below function

$(document).ready(function() {
$("#one").hide();
$("#two").hide();
$("#three").hide();
    });

Upvotes: 0

ManZzup
ManZzup

Reputation: 536

2 ways:

1) use a timer to load the page content every 2000 ms etc. 2) an event should be fired to tell JS that next part should be loaded [example is the feed in fb, once you scroll down it starts to load the latter part]

loading can be simply done by $('#one').load("one.html");

Upvotes: 0

RoneRackal
RoneRackal

Reputation: 1233

If you mean you are using jQuery.load to load content to your divs, the .load function has a callback function parameter (that is, a function to call after the contents have completed loading). With this you can assure that you can load them in the order you need (see http://api.jquery.com/load/)

For example:

$("#one").load(url, function(response, status, xhr) {
     $("#two").load( ... etc )
});

Upvotes: 0

Dead Man
Dead Man

Reputation: 2941

You can do this :

$('#one').load("one.php", function() {  // first div loaded
    $('#two').load("two.php", function() { // second div loaded
        $('#three').load("three.php", function() { // third div loaded  });
    });
});

Upvotes: 1

Related Questions