分配jQuery插件到html元素的加載，而不是在window.onload

Question

我有一個one-page web portfolio，其中每個項目的照片呈現在圖像輪播與控制/動畫分配通過jQuery Lemmon Slider插件。這個插件需要在window.onload上進行初始化。

但是，由於圖像相對較大（並且頁面上有更多項目），並且在下載所有圖像之前不會觸發事件，所以在該事件觸發之前輪播將不可用（至少5秒寬帶連接）。

所以，問題是 - 我怎麼能強迫呼籲轉盤插件（而延遲加載的圖像），或我怎麼能顯示正在加載的旋轉GIF同時加載的背景圖像和控制並在他們準備好時顯示它們（帶有分配的插件控件）？

我的index.php的相關部分的僞代碼是這樣的：

- for every directory in 'projects/': 
    - read the directory 
    - generate the carousel and put all the images in the code <div> <ul> <li> <img> 
    - assign this project's carousel ID 
- at the end of the page, initialize the plugin for every carousel there is through the window.onload event 

我希望我提供的幫助我所需要的所有信息;我急切地等待任何答案。

Answer 1

好吧，如果你的意思是該插件必須初始化頁面加載時，但不一定onload事件，你可以嘗試jQuery的「準備」 所以說，你的紡紗GIF具有ID「紡紗」， 你可以做

$("#spinning").ready(function(){ 
    $(this).show(); 
}); 
$(".carousel").ready(function(){ 
    $("#spinning").hide(); 
}); 

，並把這個「旋轉」元素的旋轉臺（不是孩子），可能只是身體下方或外側旋轉木馬股利外，並使​​其絕對定位在轉盤的中心。

這樣，只要紡紗元件準備就緒（當然，在重型轉盤準備好之前），它就會顯示並旋轉。一旦旋轉木馬準備就緒，GIF將停止旋轉並消失。

注意：document.ready在文檔準備就緒時執行，並且.ready在元素準備就緒時執行。相反，window.onload在所有元素準備就緒後執行。所以，首先要準備好，而不是上傳。這是命令。