我试图在加载页面之前更改页面上隐藏(显示:无)元素的CSS值,尽管我得到了隐藏到非隐藏样式的不必要的闪烁(我相信是由于脚本加载时间)。
我使用 jQuery 并在同一函数中发布,从 php 检索有关哪些 dom 元素需要 css 更改的信息。
目前所有脚本都在正文底部加载,我正在考虑其中之一:
- 将代码转换为纯 JavaScript 并粘贴在 header 中?
- 在 header 中加载 jQuery 和函数?
我不擅长纯 JS,并且知道 header 中的内容会减慢/阻止页面加载。不确定解决这个问题的最佳实践,有什么建议吗?
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 发生更改?
<script type="text/javascript" src="js/preload.js" async></script>
预加载.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();
}
最佳答案
尝试使用
<script src="your script" async>
位于主体底部。
在 reference它说:
If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
关于javascript - 页面加载前的 Jquery 和 Ajax 脚本以防止闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32022891/