-2

I have a page (index.php) that loads content from a seperate file (it.php) into a div using jQuery like so:

index.php

<script type="text/javascript" src="jq.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    function loadTable(){
        $("#li1").load("it.php #segment1");
    }
    loadTable();
    setInterval(loadTable, 3000);
});
<div id="li1"></div>

it.php

<div id="segment1">This text flashes and looks horrible when the page loads</div>

How can i make the whole page load at the same time? At the minute, the html and PHP loads before the jQuery which results in the div's content flashing on load.

I've tried everything but cannot seem to figure it out. I know that it can be done also, as I've seen websites loading dynamic content without it looking hideous.

11
  • 1
    If PHP is generating the page, and you're using jQuery to retrieve the other page (also PHP) why not skip the jQuery, and insert the content using the PHP you're already using? Apr 23 at 13:11
  • Dynamic content. It's statistics being loaded in it.php....
    – Ben
    Apr 23 at 13:12
  • Fair enough, then load the content into a hidden element and - once the data's loaded, and inserted - show the element? Apr 23 at 13:13
  • That sounds like it's going to load slower than the rest of the page, which is what already happens.
    – Ben
    Apr 23 at 13:14
  • Why? The content will load at the same speed, but without the "flashing" on loading the content; but, regardless, I'm not sure I see another option other than preloading the content before the user requests it. Apr 23 at 13:16

1 Answer 1

0

There are a number of ways to do what you want.

One of the ways:

  1. You may first hide the whole page (say enclose all the contents in a div known as wholepagecontainer which is hidden)
  2. Then load the it.php into the DIV li1, then use callbackup to show the wholepagecontainer on load complete

So the code (based on what you post in your question) is:

<script type="text/javascript" src="jq.js"></script>

<body>
<div style="display:none;" id="wholepagecontainer">
<div id="li1"></div>
.... other contents
</div>
</body>


<script>

function loadTable(){
$("#li1").load( "it.php #segment1", function() {
   $("#wholepagecontainer").show();
});
}

window.onload = function () {loadTable();}; 

</script>

DEMO

enter image description here

14
  • Thanks for the answer but now the whole page strobes :'(
    – Ben
    Apr 23 at 14:22
  • (1) Make sure you have removed the setInterval(loadTable, 3000); , and (2) please click the [DEMO] to see the effect (100% no strobes) -- I have included a big photo so that you can see the effect
    – Ken Lee
    Apr 23 at 14:30
  • Why not just include the file into the HTML directly instead? I don't see the value of using Ajax to load it here. It will just be an extra round trip to the server, slowing it down further before showing the page. Apr 23 at 14:44
  • 1
    @Ben - "but it's no different from just loaoding a segment in a div." - Of course not. That's all your JS is doing as well. The only difference is that it will be there from the start. To be honest, if that didn't help, then I have no idea what you're actually asking about anymore. You need to take a step back and completely rephrase your question. Apr 23 at 14:58
  • 1
    @Ben - Youtube (and other big apps like that) usually don't do things manually this way. They tend to use some frontend framework/tool, like vue, react, svelte, angular or similar. Those are tools you can build SPA's (Single Page Application) with, which is very different from what you're doing here. Apr 23 at 15:03

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.