当图像完全加载，然后显示其他等待

-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

当图像完全加载，然后显示其他等待

回答

相关问题