浏览器渲染和JavaScript执行是否同时发生？

Question

例如,如果我有这个:

$('#button').click(function() {
    $.get('/question', function(data) {
        $('#question').html(data);
        $('#question').dialog( ... );
    });
    return false;
});

在显示对话框之前,用户是否会在短时间内看到问题内容？

注意:通常我只是手动隐藏#question,但实际上它之间有一个步骤html()和dialog()另一个jQuery插件,其中的内容不能被"隐藏".

Answer 1

简答

是的，用户可能会在显示对话框之前短暂地看到问题内容。

修复方法

#question为了确保您在显示对话框之前不会立即看到 的内容，请#question在显示对话框之前绝对将其置于屏幕外。之后调用需要#question显示的jQuery插件。最后隐藏#question并恢复其位置。

CSS

#question
{
    display: none;
}

JavaScript

$('#button').click(function() {
  $.get('/question', function(data) {
    var question = $('#question');
    question.html(data);
    var position = question.css('position');
    var top = question.css('top');
    var left = question.css('left');
    question.css({ position: 'absolute', top: -1000, left: -1000 }).show();
    //whatever you need to do with #question while it's not hidden
    question.hide().css({ position: position, top: top, left: left });
    question.dialog( ... );
  });
  return false;
});