當圖像完全加載，然後顯示其他等待

-4

我有背景圖像1280x720 PNG，那裏我有很多按鈕，當一個按鈕被按下，然後它改變了spmain的圖像，它映射到其他按鈕。當圖像完全加載，然後顯示其他等待

現在的問題是我的地圖按鈕出現在新圖像加載之前。

以下是我的代碼：

function button_3b2_form1_submit() { 
    console.log(">>> Button: button_3b2_form1_submit" , selected_logo , selected_language); 
    $('#spmain').attr('src', 'images/OwnagePranks/rakesh/Hippity Hoppitus.Some Budy.png'); 
    $('#spmain').attr('usemap', 'map_to_the_form'); 

    $('#map_to_the_form').show(); // show this only when Hippity Hoppitus.Some Budy.png is fully loaded 

}

我怎麼能等到這條線，以確保其完全加載？

$('#spmain').attr('src', 'images/OwnagePranks/rakesh/Hippity Hoppitus.Some Budy.png');

然後移動到下一個？

來源

2015-04-16 YumYumYum

你可以使用'load'事件在圖像加載時觸發。 – sabithpocker

假設#spmain元素是img，那麼你可以附加一個處理程序的load()事件運行一些代碼，當圖像完全加載。試試這個：

function button_3b2_form1_submit() { 
    $('#spmain').attr({ 
     'src': 'images/OwnagePranks/rakesh/Hippity Hoppitus.Some Budy.png', 
     'usemap': 'map_to_the_form' 
    }); 
} 

// attach this in the document.ready handler: 
$('#spmain').load(function() { 
    $('#map_to_the_form').show(); 
});

來源

2015-04-16 09:38:10

在設置圖像的src屬性之前，我們是否需要綁定'load'事件？ – mohamedrias

@mohamedrias這是正確的 - 這就是爲什麼它只能在DOMReady上完成一次。在每次連續點擊時反覆附加事件處理程序是多餘的。 –

太好了。但是在這種情況下，由於$（'＃spmain'）'是一個圖像，它會在自身之前觸發onload函數，所以表單將是可見的。希望加載函數需要在顯示錶單之前檢查圖像的URL。無論是新形象還是舊形象。 – mohamedrias

$("#spmain").load(function() { 
    //Your logic 
});

假設#spmain是一個img標記。

來源

2015-04-16 09:36:57 MrVentzi

綁定onload事件到圖像，然後設置src屬性。

因此，一旦圖像加載到onload函數中，顯示錶單。

$('#spmain').load(function() { 
      $('#map_to_the_form').show(); 
    }).attr('src', 'images/OwnagePranks/rakesh/Hippity Hoppitus.Some Budy.png');

來源

2015-04-16 09:37:48 mohamedrias

當圖像完全加載，然後顯示其他等待

回答

相關問題