Well, lets be honest; 99% of the time you are waiting for ONE <div> (or other HTML element) to exists to do some javascript; not the entire document.
So i created a javascript function called waitUntilExists and it basically does what its name says it does, it waits until one HTML element exists.
So how does it work?
waitUntilExists("id_of_the_div",function(){
// Div exists, do whatever you want with it now
})
And that is it; you can put any code inside of it...
But guess what? Is also faster if you are waiting for all the <body> to load
This is faster:
waitUntilExists(document,function(){
// Page finished loading
})
Than this:
jQuery(document).ready(function(){
// Page finished loading
})
Well, but i got to be honest to you, is not faster on old versions of Internet Explorer (IE8 and all the crap before), but in any other browser it is faster.
But this thing can do stuff that $(document).ready() cannot do; it is called waitUntilExists for a reason... it will wait until the div exists no matter if it takes one milisecond or ten hours to come into existence. This can be handy for ajax and stuff like that, because you don't need callbacks, the function is executed once if the div comes into existence.
Lets check some other nice little features, there is a third paramater that is optional for the context; for example:
var obj = {}
obj.value = 123
obj.a = function(){
waitUntilExists(document, function(){alert(this.value)},this)
}
obj.a() // outputs 123
So, in that third parameter you may want to write the keyword this.
Another nice little feature is the ability to use the HTML element as the context, you just have to write "itself" in the third parameter.
waitUntilExists("content",function(){
this.style.background = "red"
},"itself")
Another nice little feature is to be able to remove one "listener"; so if you want to stop waiting for an HTML element to exist:
waitUntilExists.stop("id_of_div")
You can also put the function as the second parameter if you need to be specific.
The dark secret!
The code is in few words... just a wrapper of functions for a DOMNodeInserted event listener... yep, that is pretty much all about it. In old IE versions it becomes a wrapper for one setInterval.Oh yeah... you can find the code here: http://pastebin.com/raw.php?i=XTDKbQvK
Pretty cool ! Will you make a version for others selectors than id (i.e: classname, sibling....) ?
ReplyDeleteFurther acceleration of a page is possible by _not_ using huge GIF animations as background images.
ReplyDeleteWell there goes my idea for my latest geocities site... :( :( :(
DeleteNice idea, just note that the mutation events such as DomNodeInserted are being deprecated and so may not be supported by future browsers.... http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents
ReplyDeleteWell, it is working on Internet Explorer 10 Preview and Chrome 13 Beta; so i bet is going to work for many years to come.
ReplyDeletenicely done
ReplyDeletealso, what anime is the background from?
I removed it. But the last one was from the anime "Deadmen Wonderland" and the previous befora that was from "Evangelion".
ReplyDeleteVery nice, but why set the interval and then clear it on browers that support the DOM event? It should be other way around.
ReplyDeleteAnd would you please use a MIT License so we don't have to haul around 1kb of comments? Thanks :)
I think this will slow down all DOM manipulation. Once you listen to DOMNodeInserted, all browsers have much more work to do to report this.
ReplyDeleteThis is not a clear win.
It will be helpful and informative to learn something new about the javascript.And ur post made interesting to learn importance of the JQuery document.
ReplyDeleteweb design company
This is one of my interesting read. Okay I'm no beginner when it comes to JavaScript or even jquery. But the more I learn jquery, it feels like I'm loosing a grip on real, unadulterated JavaScript.
ReplyDeleteJavaScript Countdown Timer
This is a great script. I had been looking for a DOM manipulation approach which works as fast as CSS selectors. Now this is the one I need.
ReplyDeleteIn Firefox 13, when the code to be executed have a typo, there is no error info in the console. How do we debug if we are using Firefox?
Or just add the javascript at the end of the body.
ReplyDeleteSo if it fires a callback to check for the existence of the desired element every time DOMNodeInserted fires, that's potentially some overhead if you are using this function extensively.
ReplyDeleteThink I'll wait for more 'in the wild' review before getting too excited...
great
ReplyDelete