如何在替換圖像時避免「alt」的臨時顯示

我正在構建一個動態加載內容的網站，根據內容結果替換圖像。然而，當瀏覽器加載圖像時，會顯示alt屬性，通常不美觀。如果可能，我想保留alt屬性，但在瀏覽器下載圖像時，應該顯示圖像而不閃爍「alt」屬性。有沒有人遇到這個問題，並找到解決方案？如何在替換圖像時避免「alt」的臨時顯示

我正在使用jQuery。

來源

2011-12-12 JoBu1324

也許考慮隱藏你的圖像元素（顯示：無;等），直到圖像加載成功。 – ToddBFisher

我想這就是應該做的事情？ :)之前顯示/如果沒有圖像下載。 –

你是否預填充圖像的寬度和高度？以前在IE中工作得很好，以避免頁面在下載期間浮動。 – 2011-12-12 19:47:44

你可以「預加載」的形象，只有一次它的加載交換的src。

var tmp = new Image(); 
tmp.src = "yourimage.png"; 
tmp.onload = function() { 
    $("#actual_image").prop("src", tmp .src); 
};

來源

2011-12-12 19:48:27

在瀏覽器下載圖像時出現Alt標籤。爲了防止出現這種情況，您可以使用Xeon06建議的Image變量預加載所有「交換」圖像。當需要使用鼠標懸停效果以便圖像可以駐留在內存中時使用此功能。 –

預加載圖像似乎對我很有用，雖然我的實現有點不同（我直接在頁面上以「鍵」加載圖像） – JoBu1324

您可以在數據屬性中存儲alt，然後在加載圖像後將alt屬性添加到圖像。

來源

2011-12-12 19:47:48

在加載圖像時，您可以暫時支持替代文本。事情是這樣的：

$(function() 
{ 
    var ATTR = 'alt'; 

    $('img').each(function() 
    { 
     var $this = $(this); 
     $this.data(ATTR, $this.prop(ATTR)).removeProp(ATTR); 
    }).load(function() 
    { 
     var $this = $(this); 
     $this.prop(ATTR, $this.data(ATTR); 
    }); 
});

重構版本：

$(function() 
{ 
    var ATTR = 'alt'; 

    function disableAlt() 
    { 
     var $this = $(this); 
     $this.data(ATTR, $this.prop(ATTR)).removeProp(ATTR); 
    } 

    function enableAlt() 
    { 
     var $this = $(this); 
     $this.prop(ATTR, $this.data(ATTR); 
    } 

    $('img').each(disableAlt).load(enableAlt); 
});

來源

2011-12-12 19:48:05

不是我一直在尋找的東西，但是我會將你的答案標記爲一樣，因爲它會起作用。 – JoBu1324

當你改變圖像的源試試這個：

$('#image-id').fadeOut(250, function() { 
    $(this).attr('src', 'new-source.jpg'); 
}).on('load', function() { 
    $(this).fadeIn(250); 
});

這將淡出圖像，這樣是不可見的，然後改變它的來源，當圖像已經裝好了將漸退

這裏是一個演示：http://jsfiddle.net/xSkau/

注意.on()是jQuery的1.7新是一樣的.bind()在這種情況下。

來源

2011-12-12 19:49:13 Jasper

+1如果我要「很好地」加載我的圖像，這是解決方案我會執行。 – JoBu1324

如何：

var alt = $('#myimg').attr('alt'); 
$('#myimg').attr('alt', ''); 
$('#myimg').load(function() { 
    $(this).attr('alt', alt); 
});

來源

2011-12-12 19:51:24

哦，很多人忍着我......不應該在我的手機上回答。 –

與上述相類似MДΓΓБДLL的答案，但更jQueryish：

$('img').each(function() { 
    var $this = $(this); 
    $this.data("alt", $this.attr("alt")).removeAttr("alt"); 
}).load(function() { 
    var $this = $(this); 
    $this.attr($this.data("alt")); 
});

這樣做有什麼是極其簡單：每個<img>，保存它在jQuery的alt屬性緩存，刪除該屬性，然後加載圖像。完成後，將alt設置回原來的狀態，從緩存中提取值。

來源

2011-12-12 21:40:33

如何在替換圖像時避免「alt」的臨時顯示

回答

相關問題