交換不同大小的圖像[Javascript vs IE]

我有以下簡單的預加載功能，它將圖像「src」屬性替換爲另一個圖像（動畫GIF「加載」）。問題僅在IE中出現：如果「加載」GIF小於實際圖像src，則會調整大小。例如，如果我有一個正方形的100像素圖像並預加載它，圖像將暫時替換爲50x50像素的動畫GIF。當原始圖像完全加載時，它不會以其大小顯示，而是以較小的50px顯示。下面是代碼，如果你需要它交換不同大小的圖像[Javascript vs IE]

_preload = function(url, placeholderUrl) { 
var img = new Image(); 
loading = true; 
var placeholder = new Element("img", { 
    src: placeholderUrl 
}); 
img.placeholder = placeholder; 
img.onload = function(evt) { 
    this.placeholder.src = this.src; 
    loading = false; 
} 
img.src = url; 
return placeholder; 
}

alt text 在這裏你可以看到視覺誤差

來源

2010-10-25 Raffaele

不知道，但嘗試迫使'img.style.width =「自動「;'（相應地，'高度'）在更改src後圖像 – 2010-10-25 23:58:30

你應該能夠在回調函數中調整圖像的寬度/高度：

img.onload = function(evt) { 
    this.placeholder.src = this.src; 
    this.placeholder.width = this.width; 
    this.placeholder.height = this.height; 
    loading = false; 
}

例子：Resizing image onLoad

來源

2010-10-26 00:18:04 subhaze

這明確地解決了我的問題。雖然很奇怪你可以做這樣的事情，但瀏覽器本身並沒有這樣做：P – Raffaele 2010-10-26 09:37:58

設置寬度/高度就像設置src一樣，它們都是公共屬性。但是，是的，如果所有的瀏覽器都與JS一樣工作，那將會非常棒。 – subhaze 2010-10-26 13:41:55

我估計跟IMG更換佔位（DOM的內IMG元素），而不是簡單地改變佔位符的src-attribute應該解決這個問題。

來源

2010-10-26 00:00:34

這也是一個解決方案，但對我來說似乎更困難。替換爲dom = addingNew + removedOld。由於我不想同時顯示2個圖像，因此我必須先刪除（），然後再添加（），但如果不再有佔位符元素引用，則添加可能相當複雜DOM。 – Raffaele 2010-10-26 09:56:36

交換不同大小的圖像[Javascript vs IE]

回答

相關問題