Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#11198 closed bug (invalid)

chrome and safari - when dynamically loading scripts and stylesheets

Reported by: [email protected] Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:


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:

    <script type="..." src="libsrc.js">...

I tried this code-fix successfully for a couple of occasions (coffee-script style);

      # 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 (2)

comment:1 Changed 11 years ago by dmethvin

Resolution: invalid
Status: newclosed

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.

comment:2 Changed 11 years 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:


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 *)

Note: See TracTickets for help on using tickets.