Javascript 使用jquery脚本加载页面抖动

我用jquery进行了大量的“后期制作”，从逻辑上讲，当页面加载时，jquery脚本加载需要几秒钟的时间，从而导致了臭名昭著的“抖动”效应。现在我陷入了一个特殊的困境。我操作HTML结构的唯一方法是使用jQuery。我没有访问HTML的权限。我已经附上了我的jQuery代码，我想知道最好的方法是什么来加快速度或者让事情变得更好

$(document).ready(function() {
    //Remove container class from masthead
    $('#masthead').removeClass('container');

    //Move search bar to navbar
    $('#search').unwrap();
    $('.nav.navbar-nav').append($('#search'));
    $('#search').removeClass('text-right');
    $('#search').addClass('pull-right');

    //Logo size
    $('.pageLogo').children('img').css('width', '100px');

    $('.nav.navbar-nav').append('<li class="dropdown"><a href="#" class="dropdown-toggle disabled" data-toggle="dropdown"><span class="userdropdown">Login</span><b class="caret"</b></a><ul class="dropdown-menu profileul" role="menu"></ul></li>');

    if($('.notloggedin').length) {
        $('.profileul').append($('#internal_login_form'));
    } else {
        $('.userdropdown').text($('.user-details').html().split('<br>')[1]);
        $('.profileul').append($('.profile-menu').children('.dropdown-menu').children());
        $('.user-details').next().remove();
        $('.user-details').remove();
        $('.profileul').append($('#langSel'));
    }

$('#login_info').remove();

$('.navbar').unwrap().unwrap().unwrap();

//Add Logo to navbar header
$('.navbar-header').append($('.pageLogo'));

//Remove original container for 
$('#masthead').children().first().remove();

//Change pageLogo class to navbar-brand
$('.pageLogo').addClass('navbar-brand');
$('.navbar-brand').removeClass('pageLogo');


//Login Form
$('#login_page').children('div').remove();

//Footer
$('#footer').find('hr').remove();


//Remove glyphicon from learning path
$('.glyphicon-play').remove();

//Move forums tile on mycourse page
$('.forums').appendTo($('.col-md-4').first());

});

$（文档）.ready（函数（）{
//从桅顶移除容器类
$（“#报头”）.removeClass（'container'）；
//将搜索栏移动到导航栏
$（“#搜索”）.unwrap（）；
$（'.nav.navbar-nav'）。追加（$（'#搜索'））；
$（“#搜索”）.removeClass（'text-right'）；
$（'#search'）.addClass（'pull-right'）；
//标志尺寸
$（'.pageLogo'）.children（'img'）.css（'width'，'100px'）；
$（'.nav.navbar nav'）。追加（'
）；
if（$（'.notloggedin'）.length）{
$（'.profileul'）。追加（$（'#内部登录表单'）；
}否则{
$（'.userdropdown'）.text（$（'.userdetails'）.html（）.split（'
'））[1]）；
$（'.profileul'）.append（$（'.profilemenu'）.children（'.dropdown menu'）.children（））；
$（'.user details'）.next（）.remove（）；
$（'.user details'）.remove（）；
$（'.profileul'）。追加（$（'#langSel'）；
}
$（“#登录信息”）.remove（）；
$（'.navbar'）.unwrap（）.unwrap（）.unwrap（）；
//将徽标添加到导航栏标题
$（'.navbar header'）。追加（$（'.pageLogo'）；
//取下原始容器，以便
$（“#报头”）.children（）.first（）.remove（）；
//将pageLogo类别更改为navbar品牌
$（'.pageLogo'）.addClass（'navbar-brand'）；
$（'.navbar brand'）。removeClass（'pageLogo'）；
//登录表单
$（“#登录页面”）.children（'div'）.remove（）；
//页脚
$（'#footer'）。查找（'hr'）。删除（）；
//从学习路径中删除图标
$（'.glyphicon play'）.remove（）；
//在mycourse页面上移动论坛磁贴
$（'.forums'）.appendTo（$（'.col-md-4'）.first（））；
});

尝试一下，如果您不绑定到

document.ready

而绑定到

window.onload

，会发生什么

例如：

window.onload=function（）{….}

---

不确定它是否会产生影响，但可能值得一试。

如果您有权访问CSS，您可以使用

body{display:none}

隐藏

body

，并在javascript末尾使用

$（'body'）.show（）

显示它。你在和一个FOUC@RobSchmuecker打交道，这真是太棒了。我在加载时间上补偿了几毫秒，但看起来更好。