CODEWITHSUNDEEP
javascript
lutogniew
lutogniew

Reputation: 713

JavaScript: How to preload <object> image data? / JavaScript's Image vs. <object>

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.

Upvotes: 2

Views: 2205

Answers (2)

josh3736
josh3736

Reputation: 144912

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.

Upvotes: 3

lutogniew
lutogniew

Reputation: 713

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.

Upvotes: 1

Related Questions