game map problem, built using jquery

I'm building a map for a browser game using jquery. Basically its a grid using divs to display background images for the map content. It uses large divs and then popu开发者_如何学编程lates those larger divs with smaller ones(for the actual images) once you scroll closer to them. It uses a click and drag event deal.

Now everything works as intended very well im not having a problem with any of that. What i am having a problem with is if you click and your dragging over the map once it goes to populate the next area(it does this because if you were to load the whole map all the time, the performance of the map is rediculusly low) it obviously takes a second or two to load the data and during that time my click and drag event does not work, so it ends up feeling like the map has locked up on you.

So i guess what im looking for is a way of loading data while you can still click and drag or maybe some suggestions on a better way to populated a grid style map. (im currently using a 100x100 (90px per square map) so its like 90000px x 90000px. Any help would be great

The base of your question, as I see it, is a way around large operations that can potentially lock up the UI thread of the browser (makes the browser unresponsive). WebWorkers are one solution, but they are not completely cross-browser yet. Check out the docs: https://developer.mozilla.org/En/Using_web_workers

Aside from that, you're just going to have to segment the work. Also, take a look at your server-side code to see if there is anything more that can be done there before you send the data to the client. If you can do it server-side, do so. You're taking the burden off the client, and that will improve perceptual performance.

How are you invoking your function to load the data? Make sure you load data asynchronously (via Ajax).

Also, you can try queuing up data load requests and execute them only once you stop/complete dragging.