{"id":108,"date":"2007-08-14T13:59:21","date_gmt":"2007-08-14T00:59:21","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/2007\/08\/14\/elementready-jquery-plugin\/"},"modified":"2015-03-31T15:40:14","modified_gmt":"2015-03-31T02:40:14","slug":"elementready-jquery-plugin","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2007\/08\/14\/elementready-jquery-plugin\/","title":{"rendered":"elementReady: a jQuery plugin"},"content":{"rendered":"

Please see waitFor<\/code><\/a>, the updated version of elementReady<\/code>.<\/em><\/p>\n

I have written a simple but useful jQuery plugin. elementReady<\/code> calls a function during page load as soon as a specific element is available — even before the full DOM is loaded. It’s useful if you have unobtrusive JavaScript that you want to apply to particular page elements immediately, without having to wait for the whole DOM to load in a large page.<\/p>\n

Using the elementReady plugin is very similar to the existing jQuery.ready()<\/code> function, except that you must also pass in a string representing the ID of the element that should have the function call attached.<\/p>\n

This version of the plugin works well for me in testing (and on this page), but it has not been exhaustively tested. I would appreciate your comments on the idea and the implementation.<\/p>\n

Download<\/h2>\n

Get jquery.elementReady.js<\/a> from the Github project<\/a>.<\/p>\n

Get the latest version from the elementReady jQuery plugin page<\/a>.<\/del> Get jquery.elementReady.js<\/a> here<\/del>. Then read on for instructions and details.<\/p>\n

Documentation for jQuery.elementReady()<\/h2>\n

$.elementReady( String<\/span> id<\/span>, Function<\/span> fn<\/span> ) returns jQuery<\/span><\/span><\/span><\/p>\n

\n
While a page is loading, call a given callback function as soon as a specific
\nelement is loaded into the DOM, even before the full DOM has been loaded.
\nExecutes the function within the context of the element. This means that when
\nthe passed-in function is executed, the ‘this’ keyword points to the specific
\nDOM element.<\/p>\n

The function returns ‘this’, so you can chain multiple calls to
\nelementReady(). (Not that there’s much benefit in doing that.)<\/p>\n

One argument is passed to the callback: a reference to the jQuery function.
\nYou can name this argument $ and therefore use the $ alias even in
\nnoConflict mode.<\/p>\n

If the element has not been found by the time the DOM is fully loaded, then
\nthe function will not be called.<\/p><\/div>\n

\n

Example:<\/h3>\n

Change the source of a specific image as soon as it is loaded into the
\nDOM (before the whole DOM is loaded).<\/p>\n

$.elementReady('powerpic', function(){\r\n    this.src = 'powered-by-jquery.png';\r\n});<\/pre>\n<\/div>\n
\n
Example:<\/h3>\n
If you want to have the jQuery object instead of the regular DOM
\nelement, use the $(this) function.<\/p>\n
$.elementReady('header', function(){\r\n    $(this).addClass('fancy');\r\n});<\/pre>\n<\/div>\n
\n
Example:<\/h3>\n
Chain multiple calls to $.elementReady().<\/p>\n
$.elementReady('first',  function(){ $(this).fancify(); })\r\n .elementReady('second', function(){ $(this).fancify(); });<\/pre>\n<\/div>\n
\n
Example:<\/h3>\n
Use the ‘$’ alias within your callback, even in noConflict mode.<\/p>\n
jQuery.noConflict();\r\njQuery.elementReady('header', function($){\r\n    $(this).addClass('fancy');\r\n});<\/pre>\n<\/div>\n
\n
Example:<\/h3>\n
Change the polling interval to 100ms. This only works if $.elementReady()<\/code> has not yet been called.<\/p>\n
$.elementReady.interval_ms = 100;<\/pre>\n<\/div>\n<\/div>\n
Why?<\/h2>\n
I asked about this feature on the jQuery development list<\/a>, and to my surprise nobody had made much of an effort to do this. jQuery author John Resig has some magic code that makes this happen automatically<\/a>(!), but including this “auto” feature in the core would complicate things unnecessarily. He suggested that a plugin should be written. So here it is.<\/p>\n
Implementation notes<\/h2>\n
The jQuery.elementReady() function is interesting because it’s quite unlike most other jQuery methods. It’s not a method applied to a normal jQuery object; it can’t be, because a jQuery object is normally constructed from a DOM element (or list of DOM elements). But in this case, all we have is the ID of an element: the element itself does not yet exist.<\/p>\n
When the function is called, the matched element is passed to the callback function as a raw DOM element rather than a jQuery object. This is consistent with other event handlers, and is also the most efficient approach.<\/p>\n
The function returns the global jQuery object, so you can chain calls to elementReady()<\/code>.<\/p>\n
My implementation is inspired by the Yahoo UI library’s onAvailable()<\/a>, but is simpler (and, to be sure, less well-tested). YUI also includes a related method called onContentReady()<\/a>, which is supposed to fire when the element and<\/em> all its content is available. I have not implemented that feature yet, but I think I may end up doing so in elementReady(). This will make it more robust yet still dead simple to use.<\/p>\n
I thought about somehow overloading the original ready()<\/code> function but thought that would just add complexity for no real benefit.<\/p>\n
Things to do<\/h2>\n
This is an early version of the plugin. I’m afraid I have tested it only on Windows browsers, but I have had no problems with it yet. The main thing to do is to test it more thoroughly. As I mentioned above, I also might decide to modify the function to check that the entire contents of the target element are loaded, not just the element itself.<\/p>\n
Have your say<\/h2>\n
Apparently blog posts get x% more comments if the last heading says “Have your say”. So have your<\/em> say! Is this useful? How can it be improved?<\/p>\n","protected":false},"excerpt":{"rendered":"
Please see waitFor, the updated version of elementReady. I have written a simple but useful jQuery plugin. elementReady calls a function during page load as soon as a specific element is available — even before the full DOM is loaded. It’s useful if you have unobtrusive JavaScript that you want to apply to particular page […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[21,40,18],"class_list":["post-108","post","type-post","status-publish","format-standard","hentry","category-general","tag-javascript","tag-jquery","tag-web-development"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":7,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/108\/revisions\/711"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}