How to load big data step by step using ajax in jquery

Hello,


I will try to explain my prolblem:

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.

$.when (
		$.ajax({url:"load.php"})
		.done ( function (data)
		{
		responsive_INTRODUCTION();
		}),		
		$.getJSON(url0, function (data) {
	   str_r=data.paragraphes[0].split("-");
	   str_g=data.paragraphes[1].split("-");
	   str_b=data.paragraphes[2].split("-");

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

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

		})  
		).always (function()     
			{


		for (var i=0;i<str_r.length;i++)
			{
			pixout2[i*4  ] = str_r[i];
			pixout2[i*4 +1 ] = str_g[i];
			pixout2[i*4 +2 ] = str_b[i];
			pixout2[i*4 +3 ] = 255;
			}
		
		contextout2.putImageData(imgdout2, 0, 0);
	
		animate_BRANDING();
		
		});

Open in new window



....

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

		})		 
		).always (function()     
			{


		for (var i=0;i<str_r.length;i++)
			{
			pixout2[i*4  ] = str_r[i];
			pixout2[i*4 +1 ] = str_g[i];
			pixout2[i*4 +2 ] = str_b[i];
			pixout2[i*4 +3 ] = 255;
			}
		
		contextout2.putImageData(imgdout2, 0, 0);
	
		animate_BRANDING();
		
		});

Open in new window





and

decomposing the loading in another place

$(document).ready( function () {


	var time_delta=500;		
	var cpt=0;	
	var int1=setInterval( function() {
		cpt++;
		if (cpt==1)
			{
			$.getJSON(url1, function (data) {
			   str1_r=data.paragraphes[0].split("-");
			   str1_g=data.paragraphes[1].split("-");
			   str1_b=data.paragraphes[2].split("-");
			   run_str1=1;
			   
				});
			}
		else if (cpt==2)
			{
			$.getJSON(url2, function (data) {
			   str2_r=data.paragraphes[0].split("-");
			   str2_g=data.paragraphes[1].split("-");
			   str2_b=data.paragraphes[2].split("-");
			   run_str2=1;
			   
				});	
			}
		else {clearInterval(int1);}
	},time_delta);

Open in new window



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
DavidInLoveAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
check this :
$(document).ready( function () {

	$.ajax({
		url:"load.php",
		success: function() {
			responsive_INTRODUCTION();
			mycall();
		}
	});

	var n = 0;
	var urls = [url0, url1, url2];

	var mycall = function() {
		$.getJSON(urls[n], mycallback);
	};

	var mycallback = function(data) {
		var v = !!n ? "str" : "str"+i;
		window[v+"_r"] = data.paragraphes[0].split("-");
		window[v+"_g"] = data.paragraphes[1].split("-");
		window[v+"_b"] = data.paragraphes[2].split("-");
		window["run_"+v] = 1;
		if(i===0) {
			for(var i=0;i<str_r.length;i++) {
				pixout2[i*4  ] = str_r[i];
				pixout2[i*4 +1 ] = str_g[i];
				pixout2[i*4 +2 ] = str_b[i];
				pixout2[i*4 +3 ] = 255;
			}		
			contextout2.putImageData(imgdout2, 0, 0);	
			animate_BRANDING();
		}
		if(++n<=2) {
			mycall();
		}
	};

});

Open in new window

0
 
DavidInLoveAuthor Commented:
Hi!
Yes of course callback functions are aften the solution!
Thanks really a lot for this beautifull solution I have adaptate to
my JS.

See you David
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.