Question

下面给出的JavaScript是在End，当整页被完全加载时渲染，但是我想尽快渲染它而不影响它的自然工作，任何人都可以修改它，以便尽快呈现。

$(document).ready(function () {
    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn();
    });
});

Answer 1

您可以在渲染出影响的元素后直接加载它。

e.g。

<ul class="tabs">
   ...all your tabs
</ul>
<script>
  $(".tab_content").hide();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();
  });
</script>

Answer 2

我刚删除了dom-ready括号，所以它会在浏览器解析后立即执行，确保之前解析要选择的元素（脚本必须在元素之后）

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();
});

Answer 3

页面上的内容会在解析后立即呈现。

因此，为了尽快渲染它，将它作为＆lt;中的第一个元素。头＆gt;标签，像这样：

<html>
<head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".tab_content").hide();
        $(".tab_content:first").show();

        $("ul.tabs li").click(function () {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".tab_content").hide();
            var activeTab = $(this).attr("rel");
            $("#" + activeTab).fadeIn();
        });
    });
</script>
... rest of the head tag, like meta and title

请注意，渲染时间和执行时间不一样。

此代码将在页面开始加载后立即呈现，但仅在DOM准备就绪时才会执行（因为这是您要求它执行的操作：

$(document).ready(function () { ... }

如何尽快制作$（document）.ready（function（）JavaScript渲染？

3 个答案: