Bug Tracker

#11198 closed bug (invalid)

Opened January 20, 2012 10:20AM UTC

Closed January 20, 2012 02:16PM UTC

Last modified February 15, 2012 08:50AM UTC

chrome and safari - when dynamically loading scripts and stylesheets

Reported by: soheilnb@gmail.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
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.

Attachments (0)
Change History (2)

Changed January 20, 2012 02:16PM UTC by dmethvin comment:1

resolution: → invalid
status: new → closed

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.

Changed February 15, 2012 08:50AM UTC by andr3ws comment:2

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