追加到InnerHtml而沒有其餘的內容輕彈

我有一個格式化圖像的div元素。在用戶請求時，我異步加載附加的圖像，而不會回傳，以及使用該結果追加（新圖像格式的HTML）到div元件的JavaScript：追加到InnerHtml而沒有其餘的內容輕彈

function onRequestComplete(result) { 
     var images = document.getElementById('images'); 
     images.InnerHtml += result; 
    }

所有是好的，除了一部分，當在所述面板的圖像在HTML被追加後，先前加載閃爍。據我所知，專家組被重建，而不僅僅是新的HTML被添加到它的底部。所以這不是web 2.0的行爲。

怎樣才能不輕彈？提前致謝。

來源

2010-06-14 Centro

哪個瀏覽器？它也發生在其他瀏覽器嗎？ – Seth 2010-06-14 18:16:38

最初我每次都在IE 8中遇到這個問題。現在我用其他瀏覽器檢查了這個問題。在谷歌瀏覽器中，閃爍只發生在第一次（在第一次追加時），所有後續追加都沒有問題，沒有閃爍。在Firefox中都非常出色，沒有閃爍。 – Centro 2010-06-14 18:33:25

使用添加它們的DOM方法：

var div = document.createElement('div'); 
div.innerHTML= result; 
document.getElementById('images').appendChild(div);

或者，如果你真的想這樣做的正確的方式，爲每個圖像創建一個DOM元素，然後添加他們。這也有預載圖像的好處。

或者只是使用jQuery。 ;）

來源

2010-06-14 18:51:32

它工作:)，謝謝，只是一個小小的更正：只有一個變量（跨度或div）必須使用。當然，這只是一個錯誤類型，只爲像我這樣的新手在javascripting中不要簡單地複製粘貼代碼;）。當然，我會研究一下jQuery，因爲有時候JavaScript會讓我覺得很困難。 – Centro 2010-06-14 19:29:20

對不起，最初，我用'span'來保存內容，然後決定'div'會更準確。（jQuery評論意指「使用jQuery」是針對90％JS問題的解決方案。） – 2010-06-14 19:31:22

使用+ =運算符是一樣的：

images.innerHTML = images.innerHTML + result;

這將重新呈現所有的容器，從而導致「閃爍」。

您應該可以將相同的結果添加到容器中，而不會閃爍。爲此，您將需要createElement和appendChild方法。

HTH！

來源

2010-06-14 18:21:26 wtaniguchi

現在我明白了。我只是認爲現代瀏覽器「足夠聰明」來應對這種情況。就像Firefox一樣，這個工作不閃爍。 – Centro 2010-06-14 18:50:38

有人低估了我的答案，我想知道爲什麼;（。 – wtaniguchi 2010-06-14 22:38:20

當你添加你的內容，你可以釘在像

<span class='endMarker'></span>

然後，而不僅僅是更新「的innerHTML」這樣，你想看看通過目標內的DOM，找到最後<span>與類「endMarker」，然後添加新的內容。沒有意義成爲「使用jQuery問題解決」的人，我會說這樣的庫會讓事情變得更容易一些。要附加內容，您可以將其放在隱藏的div中，然後移動它。

來源

2010-06-14 18:21:29 Pointy

將所有圖像製作爲單個圖像，而不是使用CSS定位來顯示所需的部分。閃爍是由於加載新圖像引起的。

來源

2010-06-14 18:23:08 Babiker

追加到InnerHtml而沒有其餘的內容輕彈

回答

相關問題