Rendering images with title and box

我個人喜歡簡單、敏捷。因此當我在網頁文章中放置圖像 (image) 時，我希望透過 JavaScript 改變圖像的呈現方式，加上一個標題以及外框。標題自動從圖像的 'alt' 屬性中取得，當然啦，順便加上順序編號看起來就更正式了。

An example to show that how to render images of page with title and box.

<img src="http://www.google.com/intl/zh-TW_ALL/images/logo.gif" alt="Google"/>
<img src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif" alt="Yahoo!"/>

<script type="text/javascript">
function renderImage() {
    var box = document.createElement('div');
    for (var styleName in this.style) {
        try {box.style[styleName] = this.style[styleName];}
        catch(e) {}
    }
    with (box) {
        className = this.className;
        style.border = '1px solid #FF0000';
        style.padding = '5px';
        style.backgroundColor = '#D3D3D3';
        style.width = this.width;
        appendChild(this.parentNode.replaceChild(box, this));
        appendChild(document.createElement('br'));
        appendChild(document.createTextNode('Image.'.concat(this.myIndex+1, ': ', this.alt)));
    }
}

for (var i = 0, img = document.images[i];
    i < document.images.length;
    img = document.images[++i])
{
    img.myIndex = i;
    /*
    If thisArg is not null nor undefined, the called function is
    passed ToObject(thisArg) as the this value.
    See also: ECMA-262 15.3.4.4
    */
    if (img.complete) { /* 'complete' is not defined in W3C DOM but popular */
        window.alert('already loaded');
        renderImage.call(img);
    }
    else {
        /*
        'onload' and 'onerror' are not defined in W3C DOM but popular.
        The W3C Way: (W3C DOM Level-2)
            this.addEventListener('load', eventHandler, useCapture);
            this.addEventListener('load', eventHandler, useCapture);
        See also:
            http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html
        */
        (function(){
            this.onload = function() {
                window.alert(this.src.concat(' [alt=',this.alt,'] is loaded.'));
                renderImage.call(this);
            }
            this.onerror = function() {
                window.alert(this.src.concat(' [alt=',this.alt,'] can not be loaded.'));
            }
        }).call(img);
    }
}
</script>

有些實作細節與瀏覽器有關。首先，我使用的屬性 'complete', 'onload', 'onerror' 都不是 W3C DOM 規範的屬性，但是非常普遍 (普及率幾乎是100%) 。程式中都有註明，請參考程式註解。

其次，瀏覽器以非同步方式載入圖像，因此在調用 javascript 時，有些圖像可能已經下載完成，但有些還在下載甚至無法下載。因此應先檢查 'complete' 屬性，已完成者直接呼叫重繪函數，未完成者委派 'onload' 事件處理函數，由事件處理函數呼叫重繪函數。以 Firefox 為例，第一次載入時，所有圖像都會觸發 'onload' 事件；但當使用者透過上一頁、下一頁切換頁面時，則已載入且仍然被置於 cache 中的圖像， Firefox 會直接設定為已下載 (complete = true) 。

相關文章

• Function.prototype.call() and Function.prototype.apply()
• Load and Execute JavaScript on Demand, by createElement