只有當整個網站（圖片）加載時才加載JavaScript動畫

我正在構建這個嚴重依賴「重」圖像和動畫的熱點網站。只有當整個網站（圖片）加載時才加載JavaScript動畫

它有一些「窗簾」覆蓋所有的網站，然後我想打開這些窗簾（動畫，已經編碼它），但只有當我的所有網站（特別是圖像）加載。

還想創建一個簡單的加載器（根本沒有進展，只是說「加載」）;

UPDATE：

$.ready(function() { 
      $("#loading").fadeOut(); 
      $(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200); 
      $(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200); 

      $(".leftback").stop().animate({ width: '60px' }, 6500); 
      $(".rightback").stop().animate({ width: '60px' }, 6500); 

    });

來源

2011-05-19 Vitor Reis

的window.onload =函數（）{} – Ibu 2011-05-19 05:05:18

使用

window.onload = function() { 
    // initialize site 
};

會工作。一旦嵌入到網站中的所有內容（HTML，CSS，圖像...）完成加載，它就會觸發。

然後，您需要在加載時隱藏網站內容。如果將所有內容放在DIV中，則可以使用「visibility：hidden」來切換它的可見性。您不應該像使用某些瀏覽器（如果我能夠正確記得，Opera）使用「display：none」，它們將不會加載沒有顯示值的內容。

然後，您應該能夠在頁面頂部放置一個包含「加載」內容的DIV，然後簡單地關閉它的顯示，或者在頁面加載後從DOM中刪除它。

作爲一個側面說明，你不應該使用jQuery.ready（）函數，如RobG指出，作爲DOM這只是等待加載，而不是圖像。

來源

2011-05-19 05:21:38

看起來像是在工作。我會測試它何時在線。現在，有什麼方法可以加載FIRST窗簾+加載程序，然後開始加載其餘內容？ – 2011-05-19 13:27:56

使用Prototype的Event.observe像Event.observe

Event.observe(window, 'load', function() 
    { 
     //add javascript script tags to the document here 
    }

功能DOM中的所有圖像加載後，纔將被調用。

來源

2011-05-19 05:06:53 Amareswar

問題是標籤的jQuery，也絕對沒有理由使用另一個矮胖庫這一點。 – Quentin 2011-05-19 06:25:05

把你的處理程序放在裏面window.load。這僅在頁面完全加載後纔會觸發，包括圖形。

$(window).load()

來源

2011-05-19 05:09:44

嚴格來說，* load *事件偵聽器應該附加到* body *元素，但我不知道附加到* window *的地方會失敗。 – RobG 2011-05-19 05:18:28

@RobG，有趣jQuery的'load'文檔是如何描述'$（window）.load（）'的。你可能想看看。 – 2011-05-19 05:37:16

[文檔]（http://api.jquery.com/load-event/）並沒有告訴你任何有關代碼實際在做什麼（如果你要引用它，請包括鏈接）。上面的代碼將一個負載監聽器附加到'window'對象上，jQuery在每次*調用'（（）''時都會執行'，但在這種情況下，它取決於它。當然，如果你嘗試'（'body'）加載（...）'失敗，但這是jQuery。 – RobG 2011-05-19 06:22:14

-1

只需使用：

window.onload = function(){ 
    // javascript code will be executed only after the whole dom is loaded 
}

使用jQuery：

$.ready(function(){ 
    // some code 
});

來源

2011-05-19 05:10:55 wong2

從[jQuery文檔]（http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29）：'... $（document）.ready（）函數。一旦DOM被加載並且在加載頁面內容之前，它裏面的所有東西都會加載，OP似乎在加載事件之後。所以**不要**使用'jQuery.ready（）'。 – RobG 2011-05-19 05:16:10

我這樣做（看看代碼更新），但它只是在同一時間進行動畫+加載 – 2011-05-19 05:59:56

@Vitor Reis嘗試使用window.onload = function（）{} – wong2 2011-05-19 06:02:22

嘗試結合jQuery`s ready和load

$(document).ready(function() 
{ 
    var images = $('img'); 
    var loadedImgs = []; 
    images.each(function() 
    {   
     $(this).load(function() //image load callback 
     {   
      loadedImgs.push(''); 
     }); 
     // we are interested only if the images is loaded, 
     // so we need to place something in the loadedImgs array; 
    }); 
    var interval = setInterval(function() 
    { 
     if(loadedImg.length == loadedImgs.length) 
     { 
      clearInterval(interval); 
      //your code here ... images were loaded !!! 
     } 
    },10); 
});

來源

2011-05-19 05:50:31

只有當整個網站（圖片）加載時才加載JavaScript動畫

回答

相關問題