img.onreadystatechange

今天遇到一個很奇怪的問題，來 memo 一下，問題是這樣子的，分頁的圖出不來，IE only，後來發現是因為如果圖還沒 load 完就 append 到 Dom tree 上，IE似乎會停止 load 那張圖，解法就是設一個onreadystatechange的event handler，並且檢查目前的state是否為complete，再 append 到Dom tree上面。以上都是IE only，FF直接 append 到 Dom tree不會有問題

centerWrap = document.createElement('div');
img = document.createElement('img');
img.src = item[i].getAttribute('rel');

if(document.all){
    centerWrap.id = item[i].getAttribute('rel');
    img.onreadystatechange = function(e){
        if(this.readyState == 'complete'){
            $(this.src).appendChild(this);
        }
    }
}
else{
    centerWrap.appendChild(img);
}

update: 上面這個作法會有問題：第二次 visit 分頁的圖會出不來，原因是因為第一次 visit 的時候IE會把圖 cache 起來，第二次visit的時候會直接從cache讀出來，所以不會發生onreadystatechange的 event，所以圖的 node 也不會 append 到 Dom tree上。解法是把不確定是否有cache住的都用 time stamp force retrival。