的Javascript（jQuery的）效果等着装货

所以我有这个页面，有一些基本的自定义选项卡：的Javascript（jQuery的）效果等着装货

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

我认为使用$（文件）。就绪（）不会等待所有图像加载，所以为什么我看到JavaScript中的延迟，我们正在进行硬刷新？

来源

2012-04-03 ryanzec

的'$（文件）。就绪（） '等待DOM完全加载，然后执行javascript。 – 2012-04-03 08:14:58

如果你的代码依赖于加载的资源（例如图片）使用'$（窗口）。在（“负荷”，函数（）{}）;' – Yoshi 2012-04-03 08:17:52

@Yoshi，我不认为这是他的意思。我想他想说的是为什么在执行javascript之前页面等待图像加载？这很可能是一个脚本加载问题 – 2012-04-03 08:20:26

您正在使用的脚本是正确的，只有$(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>

来源

2012-04-03 08:23:16

那么它看起来像将javascrt移动到头部确实解决了这个问题。我在页面末尾有JavaScript文件的原因在于，多年前我被告知，最好在页面末尾放置JavaScript，以便页面看起来像加载速度更快，但似乎并不总是成为这种情况下指出的上帝的想法。 – ryanzec 2012-04-03 08:37:42

@ryanzec我总是将我的JavaScript放在页面的顶部，以确保它在内容之前加载。然后，我会在加载内容后隐藏的页面上放置一个加载图标。 – 2012-04-03 08:46:59

尝试把你的脚本标签标题 - 我想知道如果你的浏览器仍然在下载图像被下载脚本之前，这样的话。就绪（）被调用的方式后，DOM已准备就绪。

来源

2012-04-03 08:18:48

的Javascript（jQuery的）效果等着装货

回答

相关问题