jQuery - 改變圖像源首先動態地閃爍原始圖像，然後改變它

編輯：我正在尋找一個所有的jQuery解決方案在這裏，我不能編輯html/css最初不顯示圖像。jQuery - 改變圖像源首先動態地閃爍原始圖像，然後改變它

我試過這樣做的一堆不同的方式，但它仍然閃爍原始圖像，然後將其更改爲新的源圖像。

我意識到簡單的答案是：

$('.logo').attr('src', newlogosrc);

不過，我也試着像一些東西：

$('.logo').hide(); 
$('.logo').attr('src', newlogosrc); 
$(this).delay(500).show();

剛剛延緩整個過程（等待半秒，然後閃爍原始圖像，然後將其更改爲新圖像）。

任何想法？

來源

2012-04-03 Buchannon

有兩種方法，以防止圖像的初始顯示：

將內嵌style="display: none;"圖像標籤本身。
添加默認處於活動狀態的CSS規則.logo {display: none;}。

你可以，當然，也隱藏包含分區，而不是圖像本身，如果這是更實用，你可以使用visibility: hidden而不是display: none如果你喜歡。

JavaScript在DOM負載之後運行，所以除非圖像在HTML級別隱藏（在JS運行之前），它可能會在最初顯示。

默認情況下，這兩個CSS規則中的一個是活動的，圖像最初不會顯示，您可以使用javascript來適當設置.src屬性，然後使用javascript顯示圖像。

此外，假定圖像已被隱藏的兩個選項中的一個以上，合適的JS加載新的圖像，然後顯示它是這樣的：

$('.logo').load(function() { 
    $(this).show(); 
}).attr("src", newlogosrc);

這表明它當新的圖像具有成功加載。

來源

2012-04-03 16:53:37 jfriend00

我也應該注意到，我無法更改HTML/CSS - 我希望能有一個全jQuery解決方案。 – Buchannon 2012-04-03 18:13:12

奇怪的是，如果我只是用jQuery隱藏圖像，它根本不會閃爍。 – Buchannon 2012-04-03 18:14:29

@ Buchannon - 只有JS才能解決這個問題。在JS可以訪問頁面之前加載頁面。所以，這是一場定時比賽。有時，如果圖像不在瀏覽器緩存中並需要一些時間加載，JS可能會在圖像位開始顯示之前隱藏它，但有時（當它位於瀏覽器緩存中或加載時），它會顯示在任何JS運行之前。唯一可靠的方法是使用內聯樣式或CSS規則，在解析''標籤時立即隱藏它。 – jfriend00 2012-04-03 18:15:51

jQuery - 改變圖像源首先動態地閃爍原始圖像，然後改變它

回答

相關問題