2

I have a page that displays 10 different items, each item takes a while to load.

Currently, the page has to wait until all 10 items are loaded fully in order to display the webpage. I was wondering, would it be possible to display each of those items on the web page as soon as they are loaded? without having to wait for the rest to be fully loaded.

An array contains all of the 10 items, and by iterating over it, each item is displayed (note: assume displaying those items i.e. loading them takes a while) This is just a simplified scenario to get the idea across:

<html>
<body>
<?php

$array = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8","item9", "item10");

foreach ($array as $value) {
    // Here..do calculations (which is time-consuming and must be done using php) before building the HTML for each item/value in the array
    echo "<div class='display'>";
    echo "<h1>".$value."</h1>";
    echo "</div>";
    }
?>
</body>
</html>

In other words, would it be possible to display the webpage, and update it with content as soon as it's received?

user
  • 159
  • 1
  • 6
  • what about giving [this solution](http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript) a try? – Malvolio Feb 21 '16 at 17:26
  • There are hacks to get something like this to work but they should be avoided. PHP is a pre-processor which means all of the work it is doing, is being done before the HTML is actually displayed. When loading heavy items into a page like this, it should be done asynchronously using ajax/jQuery and a PHP service. In order to come up with a solution, I need to know which part takes a long time? Why does it take each item a long time to load? – James Wiley Feb 21 '16 at 17:42
  • In other words, is it taking a long time to retrieve the data for the item? or is it taking a long time to build the HTML and display it? – James Wiley Feb 21 '16 at 17:45
  • @JamesWiley Building the items is not taking much time at all. However what is taking the time is the calculations that I'm doing to each item, during each iteration, just before building the HTML and displaying it. Perhaps I should’ve highlighted that in my code, which I just did, hoping that’ll make more sense now – user Feb 21 '16 at 18:49

2 Answers2

1

Since you're doing heavy calculations on each item it will be best to move this code to javascript. PHP is a pre-processor so if you use it in your HTML, all of its work has to be done before the page can render.

First, create your page with an empty container where the entries will go. This will allow the page to load immediately without waiting for the entries to process.

Next, you need to gather the data for the entries. If the data is coming from a database, write a PHP service that returns the data for a range of entries you want to load. Call the PHP service from jQuery and fill a javascript array with the response. If the data is static and not coming from a database, you can just write the JS array yourself.

After you have your array of data, you can start a loop to go through each one and process it, then append it to your HTML with jQuery.

This way, the user gets an immediate page load and your entries will show up as they become available. It would also be a good idea to give some kind of loading spinner to indicate to the user that something is coming. This method also allows you to dip back into the PHP service from jQuery if you need to retrieve additional entries without interrupting the user experience.

James Wiley
  • 489
  • 3
  • 8
0

You may load page without the items and load each item using jquery

$(document).ready(function() {
     //iterate through array and load each item one by one
});

OR

$(window).load(function() {
    //iterate through array and load each item one by one
})
Munawir
  • 3,346
  • 9
  • 33
  • 51