javascript - 仅在显示 gif 后提示警报

Question

这就是我的代码应该如何工作的，如果我单击“按钮”，我将转到 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

所以我认为这里发生的一切是当您将以下标记注入(inject)到文档中时:

<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> 时，浏览器已经获取了图像。标签首先在文档中呈现。所以无需等待。