如何定義javascript執行順序

我的網頁webpage link使用3個javascripts。一個TabSlideOut腳本，一個SmoothDivScroll腳本和TN3圖片庫腳本。如何定義javascript執行順序

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

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

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

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

來源

2014-01-30 afrikapit

更改加載腳本的順序。但是如果它們相互依賴，則可能無法工作。另一個解決方法是隱藏元素（用css），直到你的腳本全部完成了他們的工作，然後使它們再次可見（用Javascript）。缺點是，如果有人沒有啓用Javascript，他們會盯着一個空白頁面。 –

實際上，您可以從html代碼中看到，順序是SmoothDivScroll腳本在TN3圖像庫腳本之前啓動，但即使如此，SmoothDivScroll腳本在TN3圖像庫腳本完成之前仍未完成。我希望有一種方法來定義腳本將以何種順序加載，或者可以定義腳本「B」只在腳本「A」完成時纔開始運行。 – afrikapit

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

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

來源

2014-01-30 13:40:20 stewart715

謝謝你的回答。這聽起來對我來說很容易和邏輯。不幸的是，我不是JS程序員，所以我不知道如何將TN3放入SmoothDicScroll complete函數中調用的函數中。你能舉個例子嗎？ – afrikapit

stewart715你有一個例子如何將TN3放入函數中，以及如何將SmoothDicScroll complete方法添加到TN3查詢js文件中。正如我所說，不幸的是，我不是一個JS程序員。 – afrikapit

我打算稱之爲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

希望這會有所幫助！

來源

2014-01-30 13:51:15 kmiklas

我可以根據您的建議解決問題。我發現這個頁面http://javascript.about.com/library/blanim02.htm，它解釋瞭如何以我可以遵循的方式做到這一點，即使沒有廣泛的JavaScript知識。謝謝 – afrikapit

如何定義javascript執行順序

回答

相關問題