JavaScript: How to preload

Question

I'm developing a web app at the moment, and, being a perfectionist, I try to make it all shiny and compliant with all the standards. As far as I know, the <img> tag is to be deprecated in the upcoming standards for xHTML, and as nowadays even IE is able to handle <object> properly, I wanted to use the <object> tag for all the images on my site.

Now, I need to preload some of my images for standard onmouseover swapping. It was no problem with <img>:

var rateImagesURLs = new Array("images/mark0.png", "images/mark1.png");
var rateImages = new Array(rateImagesURLs.length);

for (var i=0;i<rateImagesURLs.length;++i) {
    rateImages[i] = new Image();
    rateImages[i].src = rateImagesURLs[i];
}

but I can't get it to work with <object>. I just can't find a way to connect JavaScript's Image object to actual <object> tag. I tried playing with <object>'s data, as well as archive attribute, but even the guys at W3C seem to be unsure as to how to use it, suggesting in their documents separating values with spaces in one place, and then commas a few paragraphs below... So my question is: how do I preload images in JavaScript using <object> tag?

P.S. Sorry for lengthy intro for rather simple question.

@Hello71 If you mean `` being deprecated, perhaps I used wrong words. See [link](http://www.w3.org/TR/xhtml2/mod-image.html#sec_20.1.). The `` tag isn't deprecated (yet) but in my opinion it makes no sense anymore, and expression _"included to ease the transition to XHTML2"_ suggests it might be gone as soon as backwards compatibility issues become negligible. But certainly `` is falling from grace. If you meant something different, please be more specific. And still, I'd love to know the proper way to preload an ` — lutogniew, Apr 30 '12 at 00:42

score 3 · Accepted Answer · answered May 01 '12 at 20:19

3

This is, quite frankly, silly. <img> isn't going anywhere, and it certainly isn't "falling from grace." In fact, the spec you reference (XHTML2) has been abandoned.

The XHTML2 Working Group's charter expired before it could complete work on this document.

What you should be targeting standards-wise is HTML5. Even though I recommend against it, if you absolutely insist on XHTML, XHTML5 is a subset of HTML5; however, the only difference is really the MIME type you use to serve your page. Because the required MIME type (application/xhtml+xml or application/xml) is less compatible with legacy browsers, there's really no reason to use it in a standard website/web app.

Regarding the whole <img>/<object> thing:

From a practical standpoint, use <img>. You're only introducing a whole host of compatibility problems with existing browsers by trying to use <object>.

<object> is not accessible. <img> has an alt attribute for accessibility, and screen readers know how to handle it. Screen readers may not know what to do with an <object>. Additionally, <object> isn't semantic, it's totally generic. <img> means it's an image.

And again, <img> isn't going away or falling out of favor any time soon. For the foreseeable future, it will remain the recommended way to embed an image in your HTML document.

Finally, a comment on how you're going about accomplishing an image rollover: you shouldn't do this in JavaScript; use CSS.

Ideally, you'd use a sprite (requiring one HTTP request for all your images, thereby greatly improving performance), and adjust the background-position in :hover.

answered May 01 '12 at 20:19

josh3736

139,160
33
216
263

1

Generally, I must agree. However, I would be careful saying that ` – lutogniew May 01 '12 at 22:45
Compatibility with legacy browsers is actually the only thing making `` the right choice at the moment. IMO introducing the tag was a mistake on W3C's part in the first place. I've considered using CSS before, however I abandoned the idea. I believe using advanced CSS (meaning anything more advanced than positioning and colors, etc.) would be much more risky than operating JS when it comes to compatiblity, especially with legacy browsers, and especially with IE. At least that's the impression I've got when I was relearning web coding lately. – lutogniew May 01 '12 at 22:57
I disagree. `` is the right choice because it is the widely accepted way to embed an image in a HTML document. I haven't seen anyone seriously argue that ` – josh3736 May 02 '12 at 02:42
And now for a quick bit of history: `` was actually [proposed](http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html) and [implemented](http://web.archive.org/web/20110709121809/http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element) in 1993, nearly two years before the W3C even existed. It was later—like many other web technologies—retro-speced in [HTML 2](http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.10). ` – josh3736 May 02 '12 at 02:42
1

Finally, regarding your impressions of CSS: I'm going to be very blunt; they're wrong. As far as image rollovers, a properly implemented CSS sprite is *less* risky than any JS solution because JS can be turned off, or an uncaught exception can stop your script from running. CSS will always work. You can use the [H5BP CSS](http://html5boilerplate.com/docs/css/) to normalize CSS across browsers, so that you have less of that to worry about. Bottom line: if I was interviewing you and heard "` – josh3736 May 02 '12 at 02:42
Strange. ` ` works perfectly even in IE, and that's the reason I said that even IE can handle ` – lutogniew May 02 '12 at 10:50
As for CSS, agreed on simple rollovers. But obviously it isn't an option for all dynamic behaviors, my scenario included. And CSS compatibility issues _are still_ a problem; [link](http://www.quirksmode.org/css/contents.html) is a good source of info on this. As for JS, IMO nowadays disabling it and still wanting to use web apps / modern websites is utterly insane. – lutogniew May 02 '12 at 11:03
1

My bottom line: yes, you're right. However it happened, `` _is_ the right choice. Thank you for your input, it was very helpful. Luckily, we won't have to have this interview. We would probably beat ourselves to death with staplers before it was over. – lutogniew May 02 '12 at 11:07

score 1 · Answer 2 · answered May 01 '12 at 19:02

I played with <object> a bit longer, however there doesn't seem to be any clean way to just preload an image once and then attach it to different <object> tags dynamically. Here's an example code for the solution that works best for me, as of now, should anyone have the same problem:

// Init
for (var i=0;i<imageCount;++i) {
    imagesUnset[i] = document.createElement("object");
    imagesUnset[i].setAttribute("type", "image/png");
    imagesUnset[i].setAttribute("data", imagesURLs[0]);
    imagesUnset[i].setAttribute("onmouseover", "switchImg(this);");

    imagesSet[i] = document.createElement("object");
    imagesSet[i].setAttribute("type", "image/png");
    imagesSet[i].setAttribute("data", imagesURLs[1]);
    imagesSet[i].setAttribute("onmouseover", "switchImg(this);");
}

function switchImg(caller) {
    // some code to identify caller's index in the array and the image to swap to
    caller.parentNode.replaceChild(newObject, caller);
}

We have to create separate object pair for each image to be swapped; if we tried to use the same object, JS would give us an invalid pointer exception. Don't know how this works in terms of memory usage or performance, but it works.

What's interesting, new IE (v.9) manages much better than Firefox when it comes to caching / buffering. It was able to render changes without blinking even without special JS to manage buffering. Maybe I'll stop disliking it, finally.

Should anyone find a better solution, please share. Thanks.

JavaScript: How to preload

2 Answers2

Linked