仅在显示gif后提示警报_JavaScript

这就是我的代码应该如何工作的方式，如果单击“按钮”，我将转到display（），其中将显示完整的gif，并且只有在显示gif之后，才会出现提示。 我该怎么做呢？

我当前的代码与我想要实现的相反，即先提示然后显示gif。

//button
<input id="button" type="button" value="next" onClick="display()"/>

//javascript
<div id="display_panel">
    <script type="text/javascript">
        function display(){
            if(gameStatArray[7][1][1]==1){
                var div = document.getElementById('display_panel');

                div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>';

                if (confirm("what do you want to continue?")) {
                    alert("yes");
                } else {
                    alert("no");
                }
            }
        }
    </script>
</div>

预先感谢任何会回答的人。

因此，我认为这里发生的所有事情是，当您将以下标记添加到文档中时：

<img src="drawable/clip1.gif" />

浏览器正在向服务器发出请求以获取图像。 这可能只需要几毫秒，但是在这段时间内，脚本继续执行，并且执行了alert()位。

最简单的解决方案是从一开始就将<img>标记加载到文档中，但最初使用CSS将其隐藏。 您的JavaScript所有需要做的就是显示图像，也许是通过添加一个类。

document.getElementById('clip1').className = 'show-me';

现在，HTML看起来像：

<img id="clip1" class="show-me" src="drawable/clip1.gif" />

当<img>标签首次在文档中呈现时，浏览器已经获取了图像。 所以没有等待。

尝试这个：

function display(){
    if(gameStatArray[7][1][1]==1){
        var div = document.getElementById('display_panel');

        // create the image
        var image = new Image();

        // action that happens after the image was loaded
        image.onload = function() {
            if (confirm("what do you want to continue?")) {
                alert("yes");
            } else {
                alert("no");
            }
        };

        // wrap image in image_display div
        var imageDisplay = document.createElement("div");
        imageDisplay.id = "image_display";
        imageDisplay.appendChild(image);

        // append image_display to display_panel
        div.appendChild(imageDisplay);

        // now set the src of the image
        image.src = "drawable/clip1.gif";
    }
}

另外，也可以在将其附加到DOM之前对其进行预加载：

function display(){
    if(gameStatArray[7][1][1]==1){
        var image = new Image();
        image.onload = function() {
            var div = document.getElementById('display_panel');

            div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>';

            if (confirm("what do you want to continue?")) {
                 alert("yes");
            } else {
                alert("no");
            }
        };
        image.src = "drawable/clip1.gif";
    }
}

将onload属性添加到img标签：

//javascript
    <div id="display_panel">
        <script type="text/javascript">
            function display(){
                if(gameStatArray[7][1][1]==1){
                    var div = document.getElementById('display_panel');

                    div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif" onload="showConfirm()"/></div>';
                }
            }

function showConfirm() {
    if (confirm("what do you want to continue?")) {
        alert("yes");
    } else {
         alert("no");
    }
}
</script>

的HTML

<input id="button" type="button" value="next" onClick="displayGif()"/>

JAVASCRIPT

<script type="text/javascript">

function displaySurvey(){
    if(gameStatArray[7][1][1]==1){
        var div = document.getElementById('display_panel');
        div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>';
    return true;
    }

}


function showConfirm(){

    if(confirm("what do you want to continue?")){      
      alert("ok");
    }
    else {
      alert("KO");      
    }
}

function displayGif(){

    if(displaySurvey()){

        setTimeout(function() {showConfirm();}, 500);


    };

}

</script>

仅在显示gif后提示警报

问题描述

1楼

2楼

3楼

4楼