Ticket #11878 (closed bug: duplicate)
When using load(url…), some scripts are loaded synchronously, others asynchronously
|Reported by:||Alessandro Vernet <avernet@…>||Owned by:|
- .load() calls .html(), which calls .append(), which calls .domManip()
- .domManip() calls .buildFragment(), which extracts the scripts from the HTML
- Then .domManip() loads the scripts in a loop calling evalScript().
- For <script src="…">, evalScript() calls .ajax() with the datatype set to script.
- Then if the script doesn't require a cross-domain request, it is loaded with Ajax synchronously. If it does require an Ajax request, it is loaded by adding a script element to the DOM, asynchronously.
As a result, if the HTML contains a mix of cross-domain and same-domain request, some scripts are loaded synchronously, while others are loaded asynchronously. This has a number of undesirable effects:
- Code assuming scripts are loaded synchronously, as would be done by the browser if the HTML was loaded directly, might fail. Imagine a page loading OpenLayers (cross-domain) and "then" a script using OpenLayers (same domain), where that script could run before OpenLayers is loaded.
- The callback on .load() might be called before some scripts have loaded.
It is easy enough to get jQuery to load all the scripts asynchronously, in the order they are specified. See this patch: https://gist.github.com/2892778.
However, I'd also like .load() to only be called once all the scripts have been loaded, and I don't have a very good solution for that. Adding callbacks to the signature of .html(), .append(), and .domManip() feels a bit intrusive to me. Hopefully someone has a better suggestion.