Question

我正在与AJAX和jQuery建立互动聊天。服务器端正常工作。

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>

图像网址是随时随地生成的。我确实对我的网站提了一个实际的引用，因为我无法在另一个图像上复制它。

在Chrome上，一旦调用了函数并处理了doc.innerHTML += str，div中的所有图像都会隐藏，因此doc.scrollHeight值远低于实际值。预期的行为（例如在IE或FF上见证）是图像不会“闪烁”并且将传递真实的scrollHeight值。

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

Answer 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;
}

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

1 个答案: