Javascript if (document.images)

Question

I'm analysing other person JavaScript code and found this condition

if (document.images)

I foun on other sites that it is used to verify if browser supports dynamic images. Something like when we put mouse over image, other image is loaded. It's looks like very old JavaScript. Is it makes sense to use it nowadays? Is this condition have another objective?

Answer 1

If browser support arrays of image, this condition return true. Internet Explorer > 3 support this :) check this article http://www.quirksmode.org/js/support.html

And yes, it's very old js, there is no need to check it out now

Answer 2

Preloading images is usually where you'll find the sort of code you're describing. While this is less of an issue in modern browsers (they're much more asynchronous and can download many images at a time, figure out what is on the screen first and download that). However, removing it may slow the performance of the application you're working on.

References:

• http://www.pageresource.com/jscript/jpreload.htm
• http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ (see method 2)

Answer 3

Unless you really need to target this kind of old browsers, you can mark this check as outdated extra code and assume that all major browsers support image preloading (and they actually do) thus have the document.images object.

The document.images object is an array of the loaded images in the current document, and you can use it to append your images that will almost surely be loaded (i.e. mouse-over images) later, in order to achieve smoother effects.

The check performed by that condition assures the browser has the document.images object.

By the way this is not the best method of designing an image-driven effect unless you really need to do it this way, since CSS allows you to have better (quicker and smaller) results.