Skip to main content

Bug Tracker

Side navigation

#6781 closed enhancement (fixed)

Opened July 09, 2010 08:53PM UTC

Closed September 20, 2010 06:53PM UTC

Last modified March 09, 2012 01:41AM UTC

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:

Attachments (1)
  • resourceLoading.html (2.4 KB) - added by jrburke July 09, 2010 08:54PM UTC.

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

Change History (6)

Changed July 11, 2010 05:52PM UTC by dmethvin comment:1

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.

Changed September 20, 2010 06:53PM UTC by john comment:2

component: eventcore
resolution: → fixed
status: newclosed

Changed October 28, 2010 06:28PM UTC by Pointy comment:3

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

Changed November 23, 2010 04:56PM UTC by jitter comment:4

keywords: → needsdocs
priority: → undecided

Changed November 23, 2010 04:58PM UTC by jitter comment:5

#7214 is a duplicate of this ticket.

Changed May 20, 2011 03:52PM UTC by dmethvin comment:6

keywords: needsdocs
priority: undecidedlow

See docs for jQuery.holdReady().