Hello,
I'm a hobby programmer in PHP with no experience in JS. Somebody showed me jQuery and I was very impressed what could be done with little code. My main website is used to create (large!) custom maps using data made available by the Canadian government (see
http://trail.brijn.nu if you are interested).
I would love to provide my users with better feedback on the map creation process. For the larger maps it needs to retrieve a bunch of 1000x1000px tiles and stitch them together.
The jQuery UI Progressbar is very cool and I would like to use that. I've updated my code to get the progress from a separate php file that can be used in a jQuery GET. It all worked very well in my tests with small images :)
With the big image I have the problem that I can't get it to update the progressbar during the time the image is loading :-) And that is the whole point of the exercise :)
I've never used Javascript so I ran into a whole bunch of problems as a result of this. I'm now at the point that I think it should work.
It starts with:
$(document).ready(function()
From what I understand this loads well before all images are loaded, and some debug output shows it does.
I then try to start something on a timer to get the page updated:
intervalID = setInterval(getProgress, 500);
in getProgress I do:
$.get("showProgress.php", function(data) {
$("#progressbar").progressbar( {
value : parseInt(data)
});
console.log("Recieved data: " + data);
progress = parseInt(data);
location.reload(true);
});
And then some stuff to cancel the timer at 100%
The funny thing is that the Log lines show that the timer starts, then nothing happens for a long time. Image loads and I get a whole lot of lines in the log at once that show it did get scheduled.
So it seems the execution is stalled by the image load. I then tried to drop the big image in a DIV that is hidden until it's complete, but that doesn't help either.
I have no idea what to try next! :)
Tips are most welcome
Kind regards,
Bas