Does the jQuery $(window).load(); event not fire on pages without a <!DOCTYPE> declaration? (...in a chrome extension content script)

javascript jquery events google-chrome-extension doctype
theMaxx picture theMaxx · Nov 5, 2012 · Viewed 7.5k times · Source

I'm working on a Google Chrome extension that manipulates a webpage, but after it is either partially loaded (the DOM) or fully loaded (with images).

It seems that many sites nowadays use the 

<!DOCTYPE html>

declaration, or some variation of it, but many others do not. The question is mainly about HTML doctypes...I'm not sure about the others.

Is it safe to assume that if a webpage does not have the DOCTYPE declaration, then $(window).load(); will not be fired?

In the beginning I was using $(document).ready(); (for when the DOM is loaded), but later switched to $(window).load(); (to let the images load too).

The thing is, now $(window).load(); does not seem to work if there is no DOCTYPE. $(document).ready(); seems to work on all pages, regardless of whether a DOCTYPE is declared or not.

Maybe this can be useful for others with this same issue. I searched a bit and didn't find a decisive answer. It seems that I will end up using something like this:

if (window.document.doctype != null) {$(window).load(checkEntries);}
if (window.document.doctype == null) {$(document).ready(checkEntries);}

I guess my question is... Is this normal to have to check for the DOCTYPE to know which event to use? Or am I missing something here?

Basically, why does $(window).load(); seem not to fire if there's no DOCTYPE declaration?

Answer

LukeGT picture LukeGT · Nov 5, 2012

Basically, you shouldn't be using $(window).load(), since it's not fully supported. If you really need it, then your solution above is the best you can do. The jQuery page sums up the caveats nicely:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache

URL: http://api.jquery.com/load-event/

Related questions

Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
How do I attach events to dynamic HTML elements with jQuery?

Suppose I have some jQuery code that attaches an event handler to all elements with class .myclass. For example: $(function(){ $(".myclass").click( function() { // do something }); }); And my HTML might be as follows: <a class="myclass" href="#">test1</…

Read More