0

I'm developing a little web app that is used to simply process and store and exchange different data.

When the page loads, I create an javascript array using PHP and use the window.unload function to iterate through this array.

Each element of the array holds a contact id and the loop gets the corresponding row presenting the data (e.g. names, addresses) from another PHP script and appends it to a wrapper div:

for (var i = 0; i < contIDs.length; i++) {
    var row = document.createElement("div");
    row.className = "rowDiv";
    row.innerHTML = HTTPRequest("getRow.php?id=" + contIDs[i]);

    document.getElementById("rowsWrapper").appendChild(row);
}

In FireFox the page loads and the rows one by one pop up as supposed. Only Safari loads the page and then loads a while and all rows at once are popped into the DOM.

Can anybody imagine what I'm doing wrong or can anybody give me tips how to implement that kind of "loading animation"??

Thank you, kind regards – julian

Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107
  • Can't you just retrieve all your data in one XMLHttpRequest? Might be easier to handle in your code and more gentle on your client's internet connections? – m90 Oct 05 '12 at 13:35
  • My "Problem" is that it can get a huge amount of data. When loading everything at once it looks not that nice (as it does in Safari right now) – Julian F. Weinert Oct 07 '12 at 18:38
  • You should think about existing limitations regarding the maximum number of concurrent HTTP requests to a single server (IE8 limits this to 2!): use as little requests as possible for retrieving data (this will also increase overall performance) and think about making things look nice afterwards. You can still animate things when you have fetched the whole chunk of data. – m90 Oct 08 '12 at 09:17
  • I started going this BECAUSE it is WAYS too slow and it just don't look pretty good. The requests don't have to be concurrent. I just want Safari to display the divs one after another like Friefox does. Maybe it's not possible or recommendable. But I'd at least like to know why it is like it is… – Julian F. Weinert Oct 08 '12 at 12:01
  • How much data are you transferring if I may ask? – m90 Oct 08 '12 at 12:44

2 Answers2

0

From my understanding, the for-loop you're using would be calling an individual HTTPRequest every iteration... in some cases that can cause a hang time I'd assume (correct me if I'm wrong, I'm still a student :P ). If you're calling a PHP file, why not use an AJAX call to send the entire array to PHP using JSON

Ex:

JSON.stringify(array)

And then decode the array in PHP 

$array = json_decode($_POST['jsondata']);

You can then send back the entire list at once... Unless you want it to be created in a fictional "skipping" time, then you could always use intervals.

Reference: Pass Javascript Array -> PHP

Community
  • 1
  • 1
Jish
  • 207
  • 1
  • 8
  • I'm creating a very complex HTML tree inside the PHP file I'm calling. Thats why I'm not using JSON (I actually do it elsewhere in the project). I just want the loading animation looking as nice as it does in FireFox. Actually I could load all data at once and pass it in a loop after loading. But that makes a long loading time which doesn't look very well… – Julian F. Weinert Oct 07 '12 at 18:41
  • If you pass all your information at once, I'd assume it would be a mediocre wait time. It would definitely be much much faster than doing X amount of HTTPRequests... I just figured passing an array from PHP back to your jQuery would then allow the information to be 'locally' dealt with. **Note:** I'm not insinuating I'm correct, just a 'food for thought' in a sense. Then again, it all depends on how much data you're pumping out! – Jish Oct 09 '12 at 17:37
0

Actually it was just an issue with my HTTPRequest function. I could fix the problem by adding a new argument, a callback function.

So I'm then calling the callback in my HTTPRequest when status code is 200 and ready state is 4.

Thanks though

Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107