Question

这就是我的代码假设工作的方式，如果我点击＆＃34;按钮＆＃34;，我将转到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>

提前感谢任何回答的人。

Answer 1

所以我认为这里发生的一切就是当你向文档中注入以下标记时：

<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>标记时，浏览器已经提取了图像。所以不用等待。

Answer 2

试试这个：

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";
    }
}

Answer 3

将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>

Answer 4

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后提示警报

4 个答案: