how can I force a php include to load AFTER the rest of the page has loaded?

Question

So I've determined I'm in a bit over my head. I'm very new to any code past html and css and I decided to delve into javascript as my first attempt. I've received a lot of great feedback and while a lot of it has helped so has really been over my head.

In essence what I've done is made a gallery out of two php pages: the first is a page on my site with a sliding thumbnail window and a 'generic' field that will load the artwork and variable content. The second is a gallery.php page that has all of the potential artwork broken out into divs with the art, titles, descriptions, etc. all broken out with unique ids. When one of the thumbnails is selected, it calls the div from the gallery.php page and populates it in the 'generic' div using .innerHTML. This has worked fine but since I've got 40+ divs in the gallery.php page, making it a standard php include (in a hidden div so nothings visible) make the page take forever to load and that's not ideal.

Since I'm really new to everything I'm starting out really slow, and avoiding jquery solely as I'm trying to grasp it's javascript roots first. I posed this issue the other day when I found the .load() function in jquery and I was wondering if there was a way to write that out in straight javascript and while I didn't received any version of that specifically I did get a detailed reply on how to do it in ajax which was a bit over my head.

My inquiry essentially is one of the following scenarios possible: - Hopefully the easiest solution... is there a way load all the content on the page and then only AFTER the page is loaded tell the page to start loading the included gallery.php page's content so that I don't slow down the page's load time and if anything just slow the load time of my gallery's content when clicked? - Is AJAX the most basic way of calling the div from another page? - If there is a way to define the source as a separate php page, can I tell it to pull the div I define? - If I were to fold and include the .load() jquery function how do I return the div I'm looking for?

I'm not looking for answers to ALL of these, or course, but if there is a recommended solution to any of them please let me know.

Answer 1

As an easy way to preload the content, I'd propose a hidden iframe. This way your resources will be loaded and cached at the client, but you don't have to worry about AJAX. To ensure the content of that iframe will be loaded after the thumbnails, you can create it using plain JavaScript, and attach that to the document loaded event. About details on addEventListener see "MDN: element.addEventListener" .

window.addEventListener("load", function(){

    var iframe = document.createElement("IFRAME"); 
    iframe.setAttribute("src", "galery.php"); 
    iframe.style.display = "none"; 
    document.body.appendChild(iframe);

}, false);