Question

我有一个带有一些格式化图像的div元素。在用户请求时，我异步加载其他图像，没有回发，并使用JavaScript将结果（新图像的格式化HTML）附加到div元素：

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

一切都没问题，但是当附加HTML后，加载面板中的图像之前闪烁的部分除外。据我所知，面板是重建的，而不只是新的HTML附加在其底部。所以它不是Web 2.0的行为。

如果不轻弹，怎么办呢？提前谢谢。

Answer 1

使用+ =运算符与：

相同

images.innerHTML = images.innerHTML + result;

将重新渲染所有容器，从而导致“闪烁”。

您应该能够将相同的结果附加到容器中，而不会出现闪烁现象。为此，您将需要createElement和appendChild方法。

HTH！

Answer 2

使用dom方法添加它们：

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

或者，如果你真的想以正确的方式做到这一点，为每个图像创建一个dom元素，然后附加它们。这也具有预加载图像的好处。

或者只是使用jQuery。 ;）

Answer 3

当您添加内容时，您可以使用

这样的内容

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

然后，不是像这样更新“innerHTML”，而是查看目标中的DOM，找到带有“endMarker”类的最后<span>，然后在此之后添加新内容。没有意义成为“使用jQuery问题解决”的人，我会说像这样的库会让事情变得容易一些。要附加内容，您可以将其放入隐藏的div中，然后移动它。

Answer 4

使所有图像成为单个图像，而不是使用CSS定位来显示所需的部分。闪烁是由于加载了新图像。