页面抖动加载与jquery脚本

Page jitters onload with jquery scripts

本文关键字:jquery 脚本 加载 抖动      更新时间:2023-09-26

我用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());
});

如果你不绑定到document.ready,而是绑定到window.onload,会发生什么?

eg: window.onload = function() { .... }

不确定是否会有不同,但可能值得一试。