Question

所以我有这个页面有一些基本的自定义标签：

http://demo.unlockedmanagement.com/users/view/2

* 注意它会要求登录，只需使用管理员/密码然后转到该网址。

正常加载此页面（第一次除外），一切都很好。如果我对此页面进行了硬刷新，则选项卡/选项卡式内容会显示为尚未应用javascript，并且只在加载图像后才会应用javascript。问题是我的javascript应用标签看起来像这样（你可以看看/javascript/base.js看看整个事情）：

$(document).ready(function ()
{
    //some code ...

    //tabbed data
    if($('.tabbed-data').length > 0)
    {
        $('.tabbed-data').tabs();
    }

    //some more code ...
});

我认为使用$（document）.ready（）不会等待所有图片加载，所以为什么我看到javascript中的延迟我们正在进行硬刷新？

Answer 1

尝试将脚本标记放在标题中 - 我想知道您的浏览器在下载脚本之前是否仍在下载图像，因此在dom准备就绪后调用.ready（）。

Answer 2

您使用的脚本是正确的，$(document).ready()仅等待DOM加载。它不会等待图像加载。因此，问题很可能与您加载脚本的位置有关。

在您的代码中，您已将<script>标记放在代码的基础上。这是为什么？这很可能是问题，因为浏览器将按照它们出现的顺序在页面上加载资源。

将<script>个标记放在页面的<head>部分，以便在图片之前加载它们。

测试这是否是问题的最佳方法是将其放在标题中，看看它是否会在图片加载之前触发：

<script>
$(document).ready(function ()
{
    //some code ...

    //tabbed data
    if($('.tabbed-data').length > 0)
    {
        $('.tabbed-data').tabs();
    }

    //some more code ...
});
</script>

Javascript（jQuery）效果等待加载图像

2 个答案: