追加到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而没有其余的内容轻弹

回答

相关问题