Skip to content

warning for using .ready() when async loading jQuery #751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

warning for using .ready() when async loading jQuery #751

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c5ddb6
Update ready.xml
mattkime Jun 5, 2015
b47b684
capital Q
Jun 5, 2015
b942ed7
this is for the CLA bot
Jun 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions entries/ready.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<div class="warning">
<p>The <code>.ready()</code> method is generally incompatible with the <code>&lt;body onload=""&gt;</code> attribute. If <code>load</code> must be used, either do not use <code>.ready()</code> or use jQuery's <code>.load()</code> method to attach <code>load</code> event handlers to the window or to more specific items, like images.
</p>
<p>Loading jQuery asynchronously may cause jQuery to load after <code>DOMContentReady</code>, resulting in <code>.ready()</code> firing on <code>load</code>. Due to browser quirks jQuery is unable to determine whether <code>DOMContentLoaded</code> has fired and falls back to <code>load</code>. This can be fixed two ways. Loading jQuery synchronously will fix it. You can also place your async script requests near the closing of the body tag and remove <code>.ready()</code> usage. You code will be loaded after <code>DOMContentReady</code> fires and can execute immediately. </p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here:

Due to browser quirks jQuery

I'd place a comma before jQuery

Here:

This can be fixed two ways. Loading jQuery

I'd have:

This can be fixed in two ways. The first one is loading jQuery

Here:

immediately.

there's a trailing white space.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last few sentences sound awkward to me. I think the paragraph would read better if it stuck to async requests. How does something like this sound?

Loading jQuery asynchronously may cause jQuery to load after DOMContentReady, resulting in .ready() firing on load. Due to browser quirks, jQuery is unable to determine whether DOMContentLoaded has fired and falls back to load. To avoid this problem with asynchronous script requests, place those requests near the closing of the body and remove .ready() usage.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the bit about placing async script requests needs to be removed. I'm about 80% certain that it always works which is about 20% short of good advice. I was also doing some perf testing and found that this resulted in much slower script loading - Chrome would end up downloading scripts after images. Browsers are still browsers.

RequireJS provides https://github.com/requirejs/domReady - perhaps we should "Check your script loader docs for a $.ready alternative."

</div>
<p>All three of the following syntaxes are equivalent:</p>
<ul>
Expand Down