2

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.

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.

4

2 に答える 2

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.

于 2012-05-01T20:19:30.060 に答える
1

私はもう少し長く遊んでいましたが、画像を一度プリロードしてから、それを別のタグに動的に<object>添付するクリーンな方法はないようです。<object>誰かが同じ問題を抱えている場合、今のところ私に最適なソリューションのコード例を次に示します。

// 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);
}

交換する画像ごとに個別のオブジェクト ペアを作成する必要があります。同じオブジェクトを使用しようとすると、JS は無効なポインター例外を発生させます。これがメモリ使用量やパフォーマンスの点でどのように機能するかはわかりませんが、機能します。

興味深いことに、新しい IE (v.9) は、キャッシュ/バッファリングに関しては Firefox よりもはるかに優れています。バッファリングを管理するための特別な JS がなくても、点滅せずに変更をレンダリングできました。たぶん、私はそれを嫌うのをやめるでしょう。

誰かがより良い解決策を見つけたら、共有してください。ありがとう。

于 2012-05-01T19:02:28.250 に答える