只有在gif显示后才会提示提醒

Prompting an alert only after a gif is displayed

本文关键字：提示 gif 显示      更新时间：2023-09-26

这就是我的代码应该如何工作，如果我点击"button"，我将去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";
    }
}

为img标签添加onload属性:

//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>
相关文章：