Question

我尝试在页面加载之前改变页面上隐藏（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进行更改之前是否有办法暂停页面加载？

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

Answer 1

尝试使用

<script src="your script" async>

在身体的底部。

在reference中说：

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

Answer 2

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

相反，“包含”页面上的一个php函数输出$ privledge和$ acceptlist并在html中输入下面的行（隐藏元素样式标记将在其中进行快速修复）。然后，这将在页面加载期间显示隐藏元素，没有滞后/闪烁。

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

'view' =隐藏的元素名称，例如（'view-btn'）存储在assosiative数组中。
$ privledge =表示用户访问级别的字符串，用作在acceptList中用作引用数组的键的内容，例如（'none'，view'，'edit'）;

$ acceptList =存储元素名称的私有数组列表的assosiative数组。

<div id="user-<%= member.id %>">
  <p>name: <%= member.first_name %> <%= member.last_name %></p>
  <p>email: <%= member.email %></p>
</div>

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

Jquery＆amp;页面加载前的Ajax脚本可以防止闪烁

2 个答案: