加載JavaScript函數後

我想要一個JavaScript函數被調用一切（其他JavaScript函數和CSS）後運行。這個函數改變了我創建的幻燈片的CSS。加載JavaScript函數後

我已經添加了功能到我的HTML文件：

function loadFullSlideShow {  
    alert('If I remove this alert this would not work'); 
    $('#background').width('100%'); 
    $('#background').height("auto"); 
    $('#slide_area').width('100%'); 
    // alert('This alert ensure application of CSS with code below'); 
    $('#slide_area').height("auto"); 
    $('img').width('98%'); 
    $('img').height('auto'); 
    $('#thumb_container').width('100%'); 
    $('#thumb_container').height('auto'); 
    $('#controls').css('top', $('img').height()); 
    $('#caption_credit_footer').css('top', ($('img').height() + 18)); 
});

我希望所有其他腳本都加載完成後調用該函數。令人驚訝的是，當我在代碼的第一行撥打alert，然後在警告框上點擊OK時，正在應用CSS中的更改。但是，當我刪除警報時，更改未被應用。

我懷疑，當我刪除alert代碼之前，其他一些JavaScript代碼的執行。如何確保此代碼在頁面加載的最後運行？

我試過在很多方面調用這個函數：

$(window).bind("load", function() { loadFullSlideShow() });
$(window).on("load", function() { loadFullSlideShow() });
window.load(function() { loadFullSlideShow()});
$(function() { loadFullSlideShow() });
我也試過在<script type="text/javascript" defer="defer"></script>結合這一點。

編輯：我使用jPlayer Plugin爲jQuery JavaScript庫。

來源

2013-04-28 Ajit S

嘗試將您的腳本放在您的html代碼的最後。 – Mysteryos 2013-04-28 09:28:02

聽起來像一些其他腳本動態加載內容。 – JJJ 2013-04-28 09:28:19

@Mysteryos我也試過。 – 2013-04-28 09:29:36

如果alert()修復了您的代碼，那麼您可能有一些異步代碼正在運行，並且alert()會導致代碼在異步代碼完成之後纔會執行。在完成異步代碼之後，使代碼可靠運行的唯一方法是掛接到異步代碼的完成功能，以便知道何時完成（以下選項＃6）。如果這個異步代碼是某個庫，那麼您需要查看該庫的文檔，並找到一個回調，您可以註冊該回調以瞭解它何時完成。

您還沒有描述您的網頁中還有哪些內容需要加載，因此我們無法確切知道推薦內容。

基本上，你必須將代碼組織到正確的順序，它會在需要的順序爲常規的JavaScript（沒有的東西定於事件）在它被解析的順序進行調用。您的選擇是：

修復腳本在您的文件中的順序，使它們按照所需的順序執行。
把它在<body>標籤的結束，這將是最後一個腳本運行。
使用$(document).ready(loadFullSlideShow)，它會在DOM後運行就緒。如果您有其他需要此操作的.ready（）腳本，則最後註冊該腳本，並最後執行它。
使用$(window).load(loadFullSlideShow)，它會在DOM後運行準備就緒，所有圖像都加載。如果存在的多個腳本，則最後註冊該腳本並最後被調用。
使用setTimeout(loadFullSlideShow, xx)它將在未來運行一段時間。這通常是一種黑客行爲。仔細組織您的代碼可以防止需要這樣做。
如果您有等待完成後的異步腳本，則必須從異步腳本的完成功能中調用您的函數。
使用一個setInterval()並在運行代碼之前輪詢您的頁面，等待某些內容出現。這也是一種黑客攻擊，並且總是有更好的解決方案（例如註冊完成回調）
使用類或ID並將樣式規則指定爲CSS，以便它們始終存在，並且不必將樣式應用於javascript代碼。那麼你將不必擔心時間。

來源

2013-04-28 09:42:38 jfriend00

爲什麼downvote。我已經制定了OP的選項。 OP沒有提供足夠的信息，說明他們希望腳本執行後的內容比這更具體。 – jfriend00 2013-04-28 09:46:21

在downvote的時候，你所展示的選項與OP說他已經嘗試過的完全一樣，並且在評論中確定內容正在被動態加載。 – JJJ 2013-04-28 09:50:22

@Juhana--你還認爲答案值得讚賞嗎？現在解決方案不在這裏了嗎？ – jfriend00 2013-04-28 09:52:33

您正在將CSS應用於Javascript，爲什麼不使用CSS？它更快，更兼容！如果它不起作用，你應該專注於修復你的CSS而不是使用Javascript。

#background { 
    width: 100%; 
    height: auto; 
} 
#slide_area { 
    width: 100%; 
    height: auto; 
} 
img { 
    width: 98%; 
    height: auto; 
} 

#thumb_container { 
    width: 100%; 
    height: auto; 
} 

#controls { 
    /* Find a valid CSS way to position this, e.g. with margin. Depends too much on your HTML */ 
} 

#caption_credit_footer { 
    /* Find a valid CSS way to position this, e.g. with margin. Depends too much on your HTML */ 
}

來源

2013-04-28 09:48:32 dtech

我無法做到這一點，因爲這會改變頁面加載，我正在使用的jQuery插件動態加載CSS圖像。應該在問題中明確這一點。無論如何，感謝您的建議:) – 2013-04-28 10:57:52

然後使用'！important'指令：http://www.electrictoolbox.com/using-important-css/。或者更好：改變插件加載的CSS！這仍然是一個CSS問題，而不是JavaScript問題。 – dtech 2013-04-28 14:34:06

加載JavaScript函數後

回答

相關問題