Question

我有背景图片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');

然后转到下一个？

Answer 1

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

假设#spmain是一个img标签。

Answer 2

将onload事件绑定到图像，然后设置src属性。

因此，一旦图像加载到onload函数中，就显示表单。

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

Answer 3

假设#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();
});

当图像完全加载时，然后显示表单等待

3 个答案: