I have a grid of pictures (3x3, side by side, laid out in a ). I need to update this grid every so often. Since every picture independent from the rest (they get grabbed from different locations), I elected to load every picture by its own ajax callback, like so:
for (var i=0; i < numPictures; i++) {
Dajaxice.loadPicture(callback_loadPicture, {'picture_id':i})
}
The function callback_loadPicture() puts the picture into its proper place in the .
The problem is: Often, even though some picture will finish loading sooner than others, the browser will not display anything until the last ajax call is finished. Since some calls can time out, this means that I don't see anything until that single picture times out.
This behaves slightly differently in every browser: sometimes the picture will show as the callbacks finish (but usually not), sometimes the browser will show some images, but postpone showing all until the last one is finished loading.
I am using:
django 1.3 (python 2.7)
windows x64 as (test) server
dajaxice for ajax implementation
I am open to changing the structure of my code.
Any comments or suggestions will be appreciated.
Since the ajax calls are blocking as said by chrisdpratt, if you really need to display the images at the same time I would advise some kind of preloading of the 3x3 grid of images and when required by the code you can display them.
With this in mind you can run the code you already have on $(document).ready() but make the images hidden (ie display:none). When later required you would just change the display attribute on the images you need to display.
If the issue you were seeing was indeed caused by the single-threaded implementation of the Django development server, you might try django-devserver (https://github.com/dcramer/django-devserver). Amongst other improvements, it boasts:
"An improved runserver allowing you to process requests simultaneously."
The other improvements make it worth it, too!
Related
Tl;dr: I would like to find a way to inspect the loading time of a recurvise directive, e.g when I load a sub-node I would like to check how much time it took, the content loaded, etc ...
Here is the backgroudn of this question, I used an open-source json-tree viewer that I modified to fit my graphic style and my needs. I am using it to visualize CouchDB documents, andI had to split it in two separate directives: one only for viewing the JSON, and one for editing JSON.
Here is the problem: even though the viewer works perfectly fine, the editor is taking an insane time displaying the sub-nodes. It can take up to 2 seconds only to show the sub-nodes, and that is a problem.
I was thinking that the boolean conditions on show/hide (I do not want to display _rev or _id fields, as it would be noxious to modify) were making it slow, and began thinking about some solutions about it. In parallel, It would be useful to get some more informations, like "How much time does it take to load a sub-node" or more generally, loading time on directives. The console does not provide that level on details (or maybe I missed something).
Do you know any means in order to achieve this goal ? Any ways to check for loading time of directives or HTML element display ?
BONUS: Do you know what can be obnoxious or not about a directive, and ways to improve it's performance while loading ?
Also Chrome's Developer tools have a very nice timestrip/graph to show loading times under the Network tab
You'll have a much better overview of what is happening there.
Also cbeck out Chrome's CPU profiles of your scripts to see if anything is bogging the system down.
First of all, apologies if this question was answered before.
I'm writing a code in JS to read an Excel File, get the value of the first cell in the column, search for it (it's an ISBN code, which I'm searching with the Google Books API) and get other relevant info, made available through the search (like Title, Subtitle and Author), then proceed to the next line and repeat the process.
My problem is writing the new data back in the Excel File. The code is writing all info in the last used row in the file. While using window.alert to flag the code, I noticed that when the alert was in a for loop, right before the search was initiated, the new data was inserted just fine, but if I tried to use a pause (like a timer function or a while loop to consume time) it didn't help at all.
What I want to know is why that behavior might be happening and, if possible, of course, a possible solution for my problem, since having to use alert as a pause isn't exactly the most interesting solution.
Thanks in advance
Alert will always stop all execution of code, except for web workers. Therefore, If you need to continue execution, use a web worker. Have a look at this for reference (the note part covers this topic partially)
When browsers show a native modal interaction widget, such as an alert, it transitions into a state that waits for the response. In this state, it is allowed to redraw the page and process certain low level events. Here's the code from Mozilla Firefox that alert() and confirm() use:
http://mxr.mozilla.org/mozilla-central/source/toolkit/components/prompts/src/nsPrompter.js#434
This openRemotePrompt function doesn't return until the user clicks "OK" on the alert. However browser behaves differently while the alert is open. A loop repeatedly calls thread.processNextEvent to do certain kinds of work until the dialog is closed. (It doesn't run the application's JavaScript code, since that's meant to be single-threaded.)
When you use a pure JavaScript busy wait, for example, by looping until a certain wall time, the browser doesn't take these measures to keep things moving. Most noticeably, the UI won't redraw while the JavaScript code is looping.
I have two columns.
The column on the left renders first (obviously). The column on the right is injected code that is built from a data pull. The column on the right finishes rendering the page before the data is loaded and visible. Therefore the right column is blank, unless I refresh the page several times.
Is there a way to slow down the page rendering? The page renders properly in ie, but not ff and chrome.
I doubt you actually want to slow down the page render since that will annoy you users. What you probably want to do is improve your code so that it properly replaces the content of the div (or whatever) that holds your right column. Use an library like jQuery to make the request for the content as an AJAX call. Without code examples I can't give you anything more specific.
No but you can delay rendering the right column until your ajax call are completed. Depending on the Javascript library you're using, or if you're using raw Javascript, there should be a way to register a callback function to be called back when the data finished downloading from the server.
Load your data in this callback instead of relying on delaying for a specific amount of time, because that will always be wrong, too slow for some users and too fast for other users.
I am having a backbone.js application that I am writing.
When user press a "Search" button, I show a loading.gif image (by making it block), while I let the javascript code to continue. Once the javascript code is complete, I unhide the loading image (changing the display to none).
I am able to see it working in Firefox. In safari/and chrome, the change of CSS don't get applied until the javascript code is completed, and thus user don't see the loading image when the search is being performed.
Any way to fix this?
Thanks
A couple of things strike me as odd.. but to answer your question first:
Most DOM/css changes do not get applied until the executing Javascript returns. To get around this you can make your DOM change and then set a timeout to execute the rest of your Javascript code.
ex:
// make your image visible
function continuation() {
// Put the javascript task that you need to execute here
}
// setTimeout will release execution control back to the browser so your CSS/DOM updates
// can be applied. Once those updates are applied, continuation will be called
// by the browser and your remaining javascript can run.
setTimeout(continuation, 0);
Now it seems odd that you would have any javascript that would take so long to run that you'd have time to even see a loading gif. It would make sense to see a loading image if your are firing an XHR (ajax) request but if you are doing that then you shouldn't be having the issue you are describing. What exactly is this javascript task of yours doing?
I had a similar issue with a loading image which turned out to be because the image hadn't been loaded into the browser and for whatever reason it didn't display until something else completed. I believe in my case an XHR was somehow blocking the loading or display of the image. From memory, this only happened the first time the loading image was displayed, after that it was fine. I ended up adding an element to the page html to load the loading image and then hid it with javascript. This solved the problem..
I'm probably missing something really obvious here...
I'm showing a dialog box with progress bar during page load. The dialog and progress bar are both jQueryUI widgets. There are a couple of phases of loading - the page makes a load of jQuery $.get() requests to load resources, then on the $(document).ajaxStop() event, does things with those resources. I'm updating the progress bar and some status text throughout this process.
The issue is that as soon as the ajaxStop event fires, updates stop. The code works nicely during resource loading, but then freezes and I don't see any of the updates during processing. If I put a breakpoint on a post-ajaxStop update in Chrome and step through the code, the screen updates correctly so I know that the code works.
Can anyone explain why everything updates nicely during my AJAX loading phase, but then stops on the ajaxStop event? Is there an easy way to make updates continue afterwards?
Thanks!
Several hours of searching later, the following blog pointed me in the right direction:
There's a jQuery extension described in the entry which allows you to define two functions, one to compute and one to update the UI. It schedules them alternately using the setTimeout function.
I've had to rewrite my code in something akin to continuation passing style so that each function schedules its continuation to run using setTimeout. This returns control to the browser for long enough for the screen to be updated.
This feels like a bit of a hack though to get round browser/Javascript limitations. Anyone know of a better way?