页面加载前的 Jquery 和 Ajax 脚本以防止闪烁答案

【问题标题】：Jquery & Ajax script before page load to prevent flicker页面加载前的 Jquery 和 Ajax 脚本以防止闪烁
【发布时间】：2015-08-15 08:17:43
【问题描述】：

我正在尝试在页面加载之前更改页面上隐藏（显示：无）元素的 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 进行更改之前停止页面加载？

<script type="text/javascript" src="js/preload.js" async></script>

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

【问题讨论】：

标签： javascript jquery ajax dom

【解决方案1】：

尝试使用

<script src="your script" async>

在身体的底部。

在reference 中写道：

如果存在异步：脚本与页面的其余部分异步执行（脚本将在页面继续解析时执行）

【讨论】：

不错的建议，以前没有见过像这样使用异步......仍然会闪烁，因为我之前必须运行 jquery 脚本。所以这只适用于纯js。看起来我将不得不以某种方式转换我的代码......

【解决方案2】：

为了解决这个棘手的情况，我最终完全废弃了 javascrip/jquery 函数，因为这种闪烁与 ajax 响应所需的时间有关（我认为）。

而是在页面上“包含”一个 php 函数，该函数输出 $privledge 和 $acceptlist 并在 html 内输入下面的行（隐藏元素样式标记所在的位置是一个快速修复）。然后，这将在页面加载期间显示隐藏元素，而不会出现延迟/闪烁。

我用它来显示用户有权查看的隐藏按钮：

'view' = 隐藏元素名称 eg('view-btn') 存储在关联数组中。
$privledge = 表示用户对页面内容的访问级别的字符串，用作acceptList 中引用数组的键，例如('none',view','edit');

$acceptList = 存储元素名称的特权数组的关联数组存储列表。

<?php if (in_array('view', $acceptList[$privledge]))echo "style='display:block'"?>

如果有人能想到更简洁的解决方案，请添加评论/答案！

【讨论】：