石頭閒語:Rendering images with title and box

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

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

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) 。

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

石頭閒語

2006年11月28日

Rendering images with title and box

引用URL