ajax会闪怎么办,Jquery＆amp;页面加载前的Ajax脚本可以防止闪烁

我尝试在页面加载之前改变页面上隐藏(display：none)元素的css值，虽然我得到了隐藏到隐藏样式的不必要的闪烁(我相信由于脚本加载时间) 。

我使用jQuery并在同一个函数中发布信息从php检索有关哪些dom元素需要css更改的信息。

目前所有脚本都在主体底部加载，我正在思考其中一个：

将代码转换为纯javascript并粘贴在标题中？

在标题中加载jQuery和函数？

我在纯JS方面表现不佳，并且知道标题中的内容会减慢/阻止页面加载。不确定最佳做法，有什么建议吗？

function setHiddenPageBtns()

{

$.get('php/function/active-user.php?getAcceptedPages=true',

function(response)

{

var acceptedPages = $.parseJSON(response);

$.each(acceptedPages, function(key, value)

{

$('#'+value+'-btn').css('display','block');

});

});

}

编辑：

我认为解决方案是抛弃jQuery并使用异步脚本。我使用的是PURE JS解决方案，因此我可以异步加载，但仍然存在同样的问题(在页面加载时，css样式更改滞后并闪烁)！

我现在怀疑是服务器端花时间回应请求。我不确定如何解决这个问题，我想知道在css进行更改之前是否有办法暂停页面加载？

PRELOAD.JS：

function setHiddenBtns()

{

var request = new XMLHttpRequest();

request.open('GET', 'php/function/active-user.php?getAcceptedPages=true', true);

request.onload = function()

{

if (request.status >= 200 && request.status < 400)

{

var acceptedPages = JSON.parse(request.responseText);;

for (var i = 0; i < acceptedPages.length; i++)

{

document.getElementById(acceptedPages[i] + '-btn').style.display = "block";

}

}

};

request.send();

}