在 IE 和 Edge 中延迟启动 GIF 图像

Question

我想在我的网站上显示一个旋转的图像。我在 HTML -

中很简单地尝试了它

<div id="wait" style="display:none;width:300px;height:300px;position:absolute;top:50%;left:50%;padding:2px;">
<img src='image/spinner.gif' width="300" height="300" />
</div>

并且只需将其显示从 Jquery 更改为属性，如下所示 -

<script type="text/javascript">
        $("#example").on("click", "tbody tr td:nth-child(3)", function() {
            **$("#wait").css("display", "block");**
            var $name = $(this).text();
            var $name2 = $(this).closest('td').prev('td').text();
            var $name3 = $name.concat("&&val=", $name2);
            var uid = getUrlVars()["uid"];
            var fid = getUrlVars()["fid"];
            var url1 = 'logapi1.php?query=' + $name + '&&val=' + $name2;
            var url2 = 'logapi2.php?query=' + $name + '&&val=' + $name2;
            var url3 = 'logapiheader.php?query=' + $name + '&&val=' + $name2;
            var url4 = 'logapifull.php?query=' + $name + '&&val=' + $name2;
            var url5 = 'logapinum.php?query=' + $name + '&&val=' + $name2;
            var urls = [url1, url2, url3, url4, url5];
            console.log(urls);
            $.each(urls, function(i, u) {
                $.ajax(u, {
                    type: "POST",
                    datatype: "JSON",
                    async: false,
                    success: function() {
                        return true;
                    }
                });
            });
            window.location = "logpage02.php?query=" + $name3 + "&&uid=" + uid + "&&fid=" + fid;
        });
        </script>

这适用于 IE11、Edge 和 Firefox。

但问题是，在 FF 中，Gif 在单击 td 后立即启动 link。而在 IE 和 Edge 中，它会在几毫秒后开始。例如，对于 2 秒延迟，在 FF gif 中单击 link 并停留 2 秒后立即开始。但是对于IE & Edge，它几乎在1秒后开始并停留1秒。

我知道这不是什么大问题，还是想知道为什么会这样。

Answer 1

我试过运行您显示的代码。我发现在 IE、Edge 上没有运动延迟，Google.You 可以检查你的旋转图像是否有问题。

您可以参考以下方法获取更多信息。

Edge 的 Lazy Loading 功能的影响。
禁用third-party add-ons以减轻延迟。

在 IE 和 Edge 中延迟启动 GIF 图像

Delayed start of GIF image in IE & Edge

firefox

jquery

internet-explorer

gif

microsoft-edge