2012-04-03 55 views
2

所以我有這個頁面,有一些基本的自定義選項卡:的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中的延遲,我們正在進行硬刷新?

+0

的'$(文件)。就緒() '等待DOM完全加載,然後執行javascript。 – 2012-04-03 08:14:58

+1

如果你的代碼依賴於加載的資源(例如圖片)使用'$(窗口)。在(「負荷」,函數(){});' – Yoshi 2012-04-03 08:17:52

+0

@Yoshi,我不認爲這是他的意思。我想他想說的是爲什麼在執行javascript之前頁面等待圖像加載?這很可能是一個腳本加載問題 – 2012-04-03 08:20:26

回答

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> 
+0

那麼它看起來像將javascrt移動到頭部確實解決了這個問題。我在頁面末尾有JavaScript文件的原因在於,多年前我被告知,最好在頁面末尾放置JavaScript,以便頁面看起來像加載速度更快,但似乎並不總是成爲這種情況下指出的上帝的想法。 – ryanzec 2012-04-03 08:37:42

+0

@ryanzec我總是將我的JavaScript放在頁面的頂部,以確保它在內容之前加載。然後,我會在加載內容後隱藏的頁面上放置一個加載圖標。 – 2012-04-03 08:46:59

2

嘗試把你的腳本標籤標題 - 我想知道如果你的瀏覽器仍然在下載圖像被下載腳本之前,這樣的話。就緒()被調用的方式後,DOM已準備就緒。