如何定義javascript執行順序

Question

我的網頁webpage link使用3個javascripts。一個TabSlideOut腳本，一個SmoothDivScroll腳本和TN3圖片庫腳本。

第一次加載頁面或重新加載TN3圖片庫的腳本運行一段時間後，因爲許多圖片必須加載，這需要時間。

在此期間，SmoothDivScroll的腳本將等待並且僅在完成TN3圖庫的腳本時執行。因爲在這段時間內頁面看起來非常難看，因爲SmoothDivScroll腳本的圖像會一個接一個地顯示出來，而不是像執行SmoothDivScroll腳本時那樣平滑滾動。您可以在重新加載頁面時看到此內容。

我想實現的是，SmoothDivScroll的腳本首先執行，然後才能執行TN3圖庫的腳本。或其他任何可以阻止網頁在重新加載時看起來很難看的東西。

我不是一個非常體貼的web實現者，我沒有javascript編程知識。我嘗試了兩天尋找解決方案，但我掙扎。我希望有人能幫助解決我的問題。謝謝

Answer 1

你不應該簡單地依靠腳本的順序來確定你的執行。將您的呼叫TN3放入一個在SmoothDivScrollcomplete方法中調用的函數中。

這可能是最簡單的使用非縮小版本來做到這一點。

Answer 2

我打算稱之爲FOUC問題;例如「無風格內容的Flash」。很常見。自從20世紀後期以來，Safari就因此而臭名昭着。

簡短的回答：最初設置visibility:hidden您的元素與內聯風格。然後使用JavaScript在加載後設置visibility:visible。

通常，解決方案是隱藏內容直到加載內容，然後在準備就緒時顯示它。通常在內容加載時，您將顯示某種類型的微調器。

從技術上講，有很多方法可以做到這一點。您可以切換CSS display,visible和/或opacity設置。你可以用高z-index（我稱之爲「面紗」id="veil"）顯示覆蓋div，然後在加載內容時將其刪除，並使用微調器作爲面紗。您也可以將事物從屏幕上完全移出，直到它們已經加載完畢，然後將它們移動到位。你可以結合這些方法。

就我個人而言，我已經獲得了跨瀏覽器和跨設備與CSS visibility財產的最佳成功。我喜歡它如何爲佈局中的對象保留空間。其他解決方案有時會在移動設備和一些舊版瀏覽器上出現問題。這裏有幾個片段讓你開始。

首先，使用內聯樣式將可見性設置爲none。
- 免責聲明：我不是內聯風格的粉絲，並且理解分離關注的概念。在這種情況下，我認爲這是必要的，因爲它必須具有最高的級聯優先級，儘可能快地應用，並且我在跨環境中取得了很好的成功。純粹主義者會認爲這應該放在CSS文件中，但我相信我們不應該遵從任何指導方針;有時我們必須有勇氣在強有力的理由下打破常規。讓讀者決定。

<div id="pan-content" class="clearfix" style="visibility:hidden"> 

然後，在頁面加載（使用jQuery）：

$('#window').load(function() { 
    $('#pan-content').css({visibility:'visible'}); 
}); 

這可能被證明是有點慢，因爲你在等待，直到整個窗口加載，直到顯示的旗幟。您也可以將活動附加到特定資源，這會加快速度。看到下面的帖子：
Detect image load

希望這會有所幫助！