jQuery防止圖像被點擊，直到其他功能完成

Question

我有一個函數預加載。

我想使它成爲這樣，直到預加載完成，我的頁面上的圖像纔會執行任何操作。

1. 頁面加載
2. 預壓開始 - 點擊主圖像上並什麼
3. 裝載完成 - 點擊主圖像上會現在所說的預定功能

這怎麼可能實現呢？

謝謝

Answer 1

使用.load()事件處理

$('#myImage').load(function() { 
    // Handler for .load() called. 
}); 

Answer 2

一旦預加載完成，您可以簡單地添加單擊事件偵聽器。

Answer 3

寫在回調函數你的邏輯，這樣它會等待它在完成

$("p").hide(1000,function(){ 
    alert("The paragraph is now hidden"); // write your code here 
}); 

這應該對圖像做

$(window).load(
    function() { 
     // weave your magic here. 
    } 
); 

Answer 4

當頁面加載時：

var image = $('mainImage'); 
//this is your function binded to that image 
image.bind('click', function() { 
    //do stuff only when loaded is set to true  
    if ($(this).data('loaded') === true) { 
     /your stuff 
    }  
}); 
image.data('loaded', false); 

另一種方式 - 在HTML設置中，將類not-loaded添加到您的圖像。並在load處理程序中刪除該類。然後你的主圖像點擊處理程序必須檢查，如果類設置 - 如果沒有，你可以做你的東西。

Answer 5

這個問題已經得到解答，但在$('img.someimage').load()不適用的情況下，這是一個更一般的方法。這使您可以指定單擊處理程序，但是當一個變量代表狀態設置爲true，其中的邏輯只會工作：

var loader = { 
    isLoaded : false, // state 
    clickHandler : function(){ 
    if(!loader.isLoaded) return false; 
    real_functionality_goes_here(); 
    }, 
    setLoaded : function(which){ // utility function to turn handler on/off 
    loader.isLoaded = !!which; 
    } 
} 

然後你必須：

$('.your_element').click(loader.clickHandler); 

無論指標是代表準備，你必須運行它：

loader.setLoaded(true); // turn handler on 
loader.setLoaded(!loader.isLoaded); // toggle handler on/off