在特定情况下，当 IE 和 FF 不在 DOM 更新时，Chrome 图像会闪烁

Posted 2023-05-09

【中文标题】在特定情况下，当 IE 和 FF 不在 DOM 更新时，Chrome 图像会闪烁

【英文标题】：Chrome images blink while IE and FF don't on DOM update in a specific case

【发布时间】：2014-02-07 20:48:54

【问题描述】：

我正在使用 AJAX 和 jQuery 构建交互式聊天。服务器端工作正常。

这是问题的演示：http://jsfiddle.net/qNz9H/

JQUERY：

function writeTextToWindow() 
        var doc = $("#markChatMain0")[0];
        var str = "";

        str += "<div style='overflow:hidden;'>";
        str += '<img src="http://religiousdate.co.il/Image.ashx?id=';
        str += 137; //id
        str += '&amp;width=72&amp;height=71" style="max-height: 45px; position: relative;"/>';
        str += '<span style="border: 1px solid rgb(153, 153, 153); border-radius: 20px; width: 180px; word-wrap: break-word; padding: 5px; position: relative;">';
        str += "text"; //msg
        str += "</span></div>";

        doc.innerhtml += str;

        doc.scrollTop = doc.scrollHeight;
    

HTML：

<div id="markChatMain0" style="
    height:184px; overflow-x:hidden; overflow-y:scroll;background-color:yellow;">
    </div>

图像 URL 是在旅途中生成的。我确实对我的网站进行了实际引用，因为我无法在另一张图片上复制它。

在 Chrome 上，一旦调用了该函数并处理了 doc.innerHTML += str，那么 div 中的所有图像都会在一秒钟内不可见，因此 doc.scrollHeight 的值比实际值低很多。预期的行为（例如在 IE 或 FF 上见证）是图像不会“闪烁”并且真正的 scrollHeight 值将被传递。

为什么会发生这种情况，我该如何解决？

【参考方案1】：

您的图像在 chrome 中闪烁一秒钟，因为您不是 附加 到您的聊天 div，而是 重绘 这一切。在 Firefox 中，这可能比 Chrome 处理得好一点，但与其完全重绘一个元素，不如尝试只附加您需要的元素。

Here is an updated version of your example。在其中我做了以下事情：

添加新元素而不是重绘整个聊天窗口 利用 jQuery 库。请注意，如果您想使用它，有一个本机 javascript 方法 .appendChild，但您已经在使用 jQuery 库，因此不充分使用它几乎没有意义。 将所有样式移到 CSS 中，这样更有意义 为您的图像和跨度生成了一个模板。当我们绘制一行时，我们只是克隆模板

JS：

$(document).ready(function () 
    $("#b").on("click", add_stuff);
);

var $img = $("<img src='http://religiousdate.co.il/Image.ashx?id=137&width=72&height=71' class='images' />"),
    $span = $("<span class='spans'>text</span>");

function add_stuff() 
    var $doc = $("#markChatMain0"),
        $row = $("<div class='row'></div>").append($img.clone(), $span.clone());
    $doc.append($row);

CSS：

#markChatMain0 
    height:184px;
    overflow-x:hidden;
    overflow-y:scroll;
    background:yellow;

.row 
    overflow:hidden;

.images 
    max-height:45px;
    height:71px;
    width:72px;

.spans 
    border:1px solid rgb(153, 153, 153);
    border-radius:20px;
    width:180px;
    word-wrap:break-word;
    padding:5px;

【讨论】：

感谢您的解释！