how to load data step by step with ajax for big data without stopping the display of the webpage

how to load data step by step with ajax for big data without stopping the display of the webpage

Hello,


I will try to explain my problem:

In my website I load some big data for 3 canvas.
If I load the three, it is long and I need firstly only one.

So my first solution I did isn't good because nothing is display on the page before 3 seconds:



  4. $.when (
  5. $.ajax({url:"load.php"})
  6. .done ( function (data)
  7. {
  8. responsive_INTRODUCTION();
  9. }),
  10. $.getJSON(url0, function (data) {
  11.   str_r=data.paragraphes[0].split("-");
  12.   str_g=data.paragraphes[1].split("-");
  13.   str_b=data.paragraphes[2].split("-");

  15. })
  16. ,
  17. $.getJSON(url1, function (data) {
  18.   str1_r=data.paragraphes[0].split("-");
  19.   str1_g=data.paragraphes[1].split("-");
  20.   str1_b=data.paragraphes[2].split("-");

  22. })
  23. ,
  24. $.getJSON(url2, function (data) {
  25.   str2_r=data.paragraphes[0].split("-");
  26.   str2_g=data.paragraphes[1].split("-");
  27.   str2_b=data.paragraphes[2].split("-");

  29. })  
  30. ).always (function()     
  31. {


  34. for (var i=0;i<str_r.length;i++)
  35. {
  36. pixout2[i*4  ] = str_r[i];
  37. pixout2[i*4 +1 ] = str_g[i];
  38. pixout2[i*4 +2 ] = str_b[i];
  39. pixout2[i*4 +3 ] = 255;
  40. }
  42. contextout2.putImageData(imgdout2, 0, 0);
  44. animate_BRANDING();
  46. });

....

That is why my idea is to do that loading only the first:
  2. $.when (
  3. $.ajax({url:"load.php"})
  4. .done ( function (data)
  5. {
  6. responsive_INTRODUCTION();
  7. }),
  8. $.getJSON(url0, function (data) {
  9.   str_r=data.paragraphes[0].split("-");
  10.   str_g=data.paragraphes[1].split("-");
  11.   str_b=data.paragraphes[2].split("-");

  13. })  
  14. ).always (function()     
  15. {


  18. for (var i=0;i<str_r.length;i++)
  19. {
  20. pixout2[i*4  ] = str_r[i];
  21. pixout2[i*4 +1 ] = str_g[i];
  22. pixout2[i*4 +2 ] = str_b[i];
  23. pixout2[i*4 +3 ] = 255;
  24. }
  26. contextout2.putImageData(imgdout2, 0, 0);
  28. animate_BRANDING();
  30. });

and 

decomposing the loading in another place 

  2. $(document).ready( function () {


  5. var time_delta=500;
  6. var cpt=0;
  7. var int1=setInterval( function() {
  8. cpt++;
  9. if (cpt==1)
  10. {
  11. $.getJSON(url1, function (data) {
  12.   str1_r=data.paragraphes[0].split("-");
  13.   str1_g=data.paragraphes[1].split("-");
  14.   str1_b=data.paragraphes[2].split("-");
  15.   run_str1=1;
  16.   
  17. });
  18. }
  19. else if (cpt==2)
  20. {
  21. $.getJSON(url2, function (data) {
  22.   str2_r=data.paragraphes[0].split("-");
  23.   str2_g=data.paragraphes[1].split("-");
  24.   str2_b=data.paragraphes[2].split("-");
  25.   run_str2=1;
  26.   
  27. });
  28. }
  29. else {clearInterval(int1);}
  30. },time_delta);

I would have believed the first canvas is displayed straight away since it no more wait for the $when.


But it is still very long.

I believed that an ajax being executed on the server
this would not interact with the creation of the DOM on fly.

My question is the following:

How to load data step by step when they are needed
without stopping the display of all the process before any data are loaded? 



Thanks

David  ( @webtecgeek   www.thecacaocafe.com )