Javascript更改innerhtml導致閃爍

我使用javascript每5秒更改一個div的內容與另一個圖像。它只是選擇一個隨機圖像，然後使用.innerHTML將div的內容更改爲正確的標籤。但是，當它加載腳本時，圖像會發生變化，但整個頁面會很快閃爍一下。 .innerHTML是否會導致這種情況？如果是這樣，我怎麼能改變與JavaScript的div中的圖像？謝謝！Javascript更改innerhtml導致閃爍

編輯：你的多個建議是：缺少一個高度，超過它插入一個新的img每次。我用display:inline修復了它，並更改了img src而不是.innerHTML。再次感謝大家！

來源

2014-02-25 B_s

jsfiddle會有幫助 – turnt

您是否嘗試了不同的瀏覽器？ – frhd

您可以編輯現有的元素的「src」屬性，這可能會訣竅。 –

頁面閃爍，因爲您在帶有src設置的DOM中插入新的img標記。這會導致服務器往返加載圖像。

您可以通過預加載新圖像（當從服務器檢索新圖像時顯示加載程序）來消除閃爍。

類似：

var imageUrl = "newimage.jpg"; 
var imageElement = $("img"); 
var img = new Image(); 


// show loader here 

img.onload = function(){ 
    imageElement.attr("src",imageUrl); // this will actualy show preloaded image 

    // hide loader here 
}; 
img.onerror = function(){ 
    // som-ting-wong came along 

    // hide loader here 
}; 
img.src = imageUrl ; // this will start image preloading

來源

2014-02-25 21:09:58 longchiwen

設置onload處理程序在設置'.src'之後，在IE中會出現問題。如果圖像已被緩存，則可能會錯過onload事件。 – jfriend00

@ jfriend00你是對的。我更新了我的回答 – longchiwen

預加載技術使圖像立即出現，但由於整個img標籤被替換爲另一個'閃爍'仍然出現。現在已經修復，請參閱我的修改。儘管感謝您詳細說明信息，但它有助於我更好地理解問題！ –

有一件事可以幫助Chrome至少在Firefox中保存你的jpeg，並且它們渲染速度更快，可能會減少閃爍。

http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

另一個是修改代碼，以便而不是取代的innerHTML，您可以隱藏/取消隱藏一個div內的圖像。

希望這會有所幫助。

來源

2014-02-25 20:54:05 archie

擴大我的評論到一個答案......

爲了防止閃爍變化的圖像時，你需要做的＃1件事就是確保瀏覽器從來都不是處於不知道圖像的高度和寬度的狀態。如果您還想阻止其顯示新圖像所在的空白空間，則還需要確保圖像在放入頁面之前已經預先緩存。最簡單的解決方法是，可能只是確保您提供的任何圖像標籤都具有與圖像大小相匹配的高度和寬度屬性，並且無論何時替換該圖像標籤，它的高度和寬度都與您所使用的相同更換。這應該防止閃爍。對於乾淨的初始顯示和更換的形象，你可以做以下所有：

確保您的圖像標籤既具有高度和寬度屬性，以確保瀏覽器知道到底有多少空間預留該圖像甚至在瀏覽器加載該圖像之前。如果您不這樣做，那麼瀏覽器在圖像至少部分下載之前不會知道圖像大小，它必須分配一些初始空間，然後在下載圖像時調整到最終尺寸。這可能會導致閃爍，因爲頁面會放置到一組尺寸，然後必須重新調整爲最終尺寸。如果指定了高度和寬度屬性，則不會發生這種尺寸變化。
與其替換整個圖片標籤，您通常只需更改現有圖片標籤的.src屬性即可，只需指定一個新的圖片網址即可。
如果您希望在沒有時間的情況下立即顯示圖像，而瀏覽器尚未顯示圖像位，則可以預緩存圖像。這些以前的答案中提供了圖像緩存代碼：here,here,here和here。

來源

2014-02-25 21:54:02 jfriend00

Javascript更改innerhtml導致閃爍

回答

相關問題