Ticket #11198 (closed bug: invalid)
chrome and safari - when dynamically loading scripts and stylesheets
| Reported by: | soheilnb@… | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
Thanks for your great work. I cannot imagine developing web Javascript without jQuery anymore!
Maybe it is not a bug, or maybe I should refer the problem to Google and Apple bug-fix page.
I noticed that Safari and Chrome differ from other browsers when they try to load dynamic .js and .css files; i.e.; some code like
includeScript ("file1.js");
includeStyleSheet (file2.css");
in that in these two browsers, document.ready is triggered when the initial DOM model is fully loaded (but not yet all dynamic scripts and styles), therefore the standard jQuery document.ready may encounter some errors.
Apparently, the old-fashion
<body onload="init()">...
doesn't have such a problem, but sometimes it is annoying or impractical to change .html file apart from adding a single component load file:
<head>
<script type="..." src="libsrc.js">...
I tried this code-fix successfully for a couple of occasions (coffee-script style);
$->
try
# do init code
catch e
# add dynamically body onload handler to do the init code
I just wish to know if there is a better solution, or any hope to have this problem fixed in future versions of jQuery?
Thanks a lot.
Change History
comment:1 Changed 16 months ago by dmethvin
- Status changed from new to closed
- Resolution set to invalid
comment:2 Changed 15 months ago by andr3ws
As dmethvin says:
Use http://yepnopejs.com in the latest version (1.52). It comes with a complete handler and you can use it like:
yepnope([{
load : [your, css, or, js, files], complete : function() {
Scripts willl auto execute here. To stop that, i.e for css files, you can add prefixes (!css)
}
}]);
Hope it helps *)
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
If you're dynamically including scripts, you should only be running code once you're sure they have loaded. Script loaders like LabJS or YepNope will do that for you in a cross-browser way.
The .ready() functions are called when the HTML is ready but before all other assets like images are loaded. if you want to wait for body.onload then use $("body").on("load", ... ) instead. However that may leave the user waiting for quite a while.
In any case this isn't a bug, ask for more help on the forum or StackOverflow if you need it.