Make a specific div load last

I'm trying to make a page where a certain div (with lots of php, html a开发者_运维知识库nd javascript content) loads after the rest of the page. Is this possible if so how?

You could apply this div a hidden style and then use javascript to show it:

$(function() {
    $('#someDiv').show();
});

But if you want to avoid loading it initially you could use AJAX:

$(function() {
    // <div id="container"></div> will be an empty div
    $('#container').load('/script');
});

Also note that if you want this loading to happen once all other content is loaded including graphics you could use the $(window).load instead of $(document).ready:

$(window).load(function () {
    ...
});

I had a similar Issue, needed the data to be filled in after a certain div was created. I use .ejs files for this stack.

What I did was Pull all the code to the .ejs page Ordering it in the way I needed.

For Ex.

<script type="text/javascript">
    jQuery making the divs
</script>
<% Pull Data and put it in the divs above %>

look in to jQuery's $.ajax, and related functions. I think you'll find they're exactly what you're looking for. a simple example:

<script type="text/javascript">
$(function() { // called when page is done loading; you can have lots of these
  $.ajax({
    url: 'other-content.php',
    success: function(data) { $('#load-me-later').html(data); }
  });
});
</script>
<div id="load-me-later"></div>

The certain

<div id="the_div">some text or whatever</div>

must have

 #the_div { display:none; }

in css.

An then

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

There are several ways to do this. For one, you could put that div at the end of the page and flush() just before it; but this isn't very reliable, and it's pretty darned hard to get position and the likes right. A better way would be ajax:

$.ajax({
  url: 'myurl.php',
  data: someDataMaybe,
  success: function(html) {
    $('#mydiv').html(html); // document.getElementById('mydiv').innerHTML = html would be a thousand times faster, but I've been told jquery people like this more
  }
});

this will only execute after page load and then load the contents into the div. It of course assumes myurl.php outputs only content that should be in said div.

So say you have this page:

<div id="page">
  <div id="content">
    <!-- lotsa stuff in here -->
  </div>
  <div id="mydiv"></div>
</div>
<script type="text/javascript">
// the stuff above ^
</script>

And myurl.php outputs this:

Some PHP-generated stuff

which would result in:

<div id="mydiv">Some PHP-generated stuff</div>