Bug Tracker

Opened 13 years ago

Closed 12 years ago

Last modified 11 years ago

#6781 closed enhancement (fixed)

Mechanism for resource loading awareness in DOM ready

Reported by: jrburke Owned by:
Priority: low Milestone: 1.4.3
Component: core Version: 1.4.2
Keywords: Cc:
Blocked by: Blocking:


Script loaders that load scripts asynchronously and on demand may have scripts still loading with DOMContentLoaded/DOM ready fires. Ideally, jQuery would not fire its DOM ready actions until all scripts are loaded.

This is complicated by the fact that jQuery could be loaded after the page has loaded, so it needs to be able to know via some property besides document.readyState to know if all the scripts are ready.

Attached is a test file for a possible approach to this, where a new property is added to document.documentReady, "resourceLoading", to indicate if something is still being loaded. I have no preference on the name of the property, this is just a placeholder suggestion, to indicate the desired behavior.

John Resig thought that such a mechanism should be based on a counter, to allow something more than just a binary value if different types or numbers of resources need to indicate a loading dependency, so that approach is used for the value of the property.

It uses a dynamically created event to indicate changes to the value. By using an event, jQuery can listen to changes in the value, to know when it goes to zero, so its DOM ready callbacks can occur.

Hopefully something like this approach would allow any type of script loader to communicate that something is occurring that should prevent ready callbacks from being fired, without having to make more specific changes to jQuery.

By using an inspectable, global generic property that is tied to an event system to get updates on the value, it should provide robust communication of state.

Ideally a global property could be avoided, but I do not see another way to let jQuery know the state of script loading as soon as possible. If jQuery is loaded after the page loads, it checks as part of loading for document.readyState, and if the script that loads jQuery also has other scripts bundled with it that register DOM ready callbacks, those callbacks would be triggered before a script loader could call a jQuery specific function to indicate scripts are loading.

Hopefully this approach could then also be used by other JS libraries that provide DOM ready functionality but still want to participate in dynamic, async script loading.

The attached test page can also be tried here: http://www.tagneto.org/web/resourceLoading.html

Attachments (1)

resourceLoading.html (2.4 KB) - added by jrburke 13 years ago.
Test file indicating how the property would work with dynamic event notification

Download all attachments as: .zip

Change History (7)

Changed 13 years ago by jrburke

Attachment: resourceLoading.html added

Test file indicating how the property would work with dynamic event notification

comment:1 Changed 13 years ago by dmethvin

Component: unfiledevent

Isn't this too monolithic, or did I miss something about the implementation? Ideally you'd want to pair the "ready" code for a particular script file with the loading of that script alone, so that the page could be (at least minimally) functional before everything loads.

comment:2 Changed 12 years ago by john

Component: eventcore
Resolution: fixed
Status: newclosed

comment:3 Changed 12 years ago by Pointy

I believe that the changes implemented for this bug are causing a serious problem in WebKit browsers. See bug #7344.

comment:4 Changed 12 years ago by jitter

Keywords: needsdocs added
Priority: undecided

comment:5 Changed 12 years ago by jitter

#7214 is a duplicate of this ticket.

comment:6 Changed 12 years ago by dmethvin

Keywords: needsdocs removed
Priority: undecidedlow

See docs for jQuery.holdReady().

Note: See TracTickets for help on using tickets.