Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#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:
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.

Change History (2)

comment:1 Changed 8 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 8 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:

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

Note: See TracTickets for help on using tickets.