Jquery 图像完全加载后，显示表单，否则等待

我有背景图像1280x720PNG，我有很多按钮，当按下一个按钮时，它会改变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'); 

然后转到下一个

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

---

假设#spmain是一个img标记。

将

onload

事件绑定到图像，然后设置

src

属性

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

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

假设

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

---

您可以使用在加载图像时触发的

load

事件。在设置图像的

src

属性之前，我们是否需要绑定

load

事件？@mohamedrias这是正确的-这就是为什么只应在DOMReady上执行一次。在每次连续单击时重复附加事件处理程序是多余的。太好了。但是在这个场景中，由于

$（'#spmain'）

是一个映像，它会在自身之前触发onload函数，因此表单是可见的。希望在加载函数中，在显示表单之前需要检查图像URL。无论是新图像还是旧图像。问题是表单应该只有在图像完全加载时才可见。（我有100个地图和100个表单，每个表单在1280x720图像完全加载后加载）使用.load in.ready第一次工作，但不适用于下一次..示例：徽标菜单，您选择徽标它加载图像询问使用哪种语言，您选择语言它现在询问使用form1的新菜单屏幕。现在我只希望图像完全加载，然后可以应用操作。