2011-02-15 55 views
20

對不起,如果這之前已經回答,但所有的搜索都談論的差異,而不是如果可能的話一起使用兩者。窗口內文件準備好了嗎?

簡單來說,$(window).load.(function() {})可以用於$(document).ready.(function() {})的INSIDE嗎?

我有一些事情應該在DOM加載後完成,但是我只想在圖像加載完成後才能顯示某些元素。唯一能夠在Explorer 8中工作的是將$(window).load函數放在$(document).ready之內。

這是一個可以接受的做法嗎?

我只是想使用最可接受的方法來顯示DIV包含小圖像,如工具欄,它完全構建後。 (例如,visibilityhiddendisplaynone)。此DIV的HTML由$(document).ready中的代碼編寫,然後在使用$(window).load之前使用$('body').append()附加到主體。

我有很多的問題,瀏覽器8

回答

20

這工作得很好,是一個可以接受的做法。畢竟,正如您所描述的那樣,有些情況下$(window).load()處理程序中的邏輯取決於DOM準備就緒後發生的工作。如果在設置$(window).load()時窗口實際上已經加載,則處理程序將立即啓動。

+0

感謝您的回答,它給了我所需要的信心着手重寫我的劇本爲更穩健。 – Sparky 2011-02-15 18:54:50

11

編輯:

注意:這個答案是隻適用於jQuery的v2和下方。


jQuery .ready() event

處理程序傳遞給.ready()保證要執行 的DOM就緒後,所以這通常是連接的所有其他事件的最好的地方處理程序並運行其他jQuery代碼。

jQuery .load() event method

load事件被髮送到一個元件當它和所有的子元件已經 被完全加載。此事件可以發送到與URL相關聯的任何元素 :圖像,腳本,框架,iframe和窗口對象。

基於上面的jQuery文檔上,我什麼也沒看見這將表明有以下任何問題:內部的ready根本保證

$(document).ready(function() { 
    // will fire IMMEDIATELY after the DOM is constructed 

    $(window).load(function() { 
     // will only fire AFTER all pages assets have loaded 
    }) 

}); 

放置一個.load的DOM已準備就緒的時候load被解僱。

有人可能希望將所有 jQuery代碼放在單個DOM就緒處理程序中,但仍可能有一個jQuery代碼的子集,它要求首先加載所有圖像。這種安排保證所有的代碼在DOM準備好時被觸發一次,其餘的將在頁面資源完成加載後隨後觸發。

這最終可能更多的是個人偏好問題,但是OP明確地詢問這種安排是否會導致問題。這並未證實是真實的。

+0

這是一個幻想的答案 – 2016-04-14 21:14:02

3

警告: 在這個問題的答案是相當過時的。

作爲@ViRuSTriNiTy在評論中提到,此代碼在jQuery 3中不再有效,並且在GitHub上被提及爲問題。

所以這種方法不建議了。

一種方式來做到這一點是使用下面的代碼

$(window).on("load", function(){ 
    $.ready.then(function(){ 
     // Both ready and loaded 
    }); 
}) 

然而,這個代碼將不能工作,如果你加載準備圖像,並要撥打一些代碼後完全加載。

0

我最近碰到這個問題...從jQuery版本3,我們不能再把$(window).on('load')放到document.ready()中......因爲ready handler被調用異步,這意味着可以在加載後調用。

jQuery的核心團隊Github: jQuery 3 issues

需要明確的是,我們的理解是什麼導致了這一點。我們最近準備好 處理程序異步啓動。這有好處,很難讓 放棄。缺點是,如果加載事件足夠快地觸發,就緒處理程序有時會在加載事件後觸發 。在這個問題中你看到的效果是 ,這是因爲你在加載事件已經觸發後綁定了​​一個加載事件 處理程序。

此修復程序將綁定準備就緒之外的負載。

這兩種方法的應該叫:

$(function() { 
    // Things that need to happen when the document is ready 
}); 

$(window).on("load", function() { 
    // Things that need to happen after full load 
});