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

【问题标题】：Delayed start of GIF image in IE & Edge在 IE 和 Edge 中延迟启动 GIF 图像
【发布时间】：2020-09-12 19:18:32
【问题描述】：

我正在尝试在我的网站上显示旋转图像。我已经非常简单地尝试了它，就像下面在 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 链接后立即启动。而在 IE 和 Edge 中，它在几毫秒后就开始了。例如，对于 2 秒延迟，在 FF gif 中，单击链接后立即启动并停留 2 秒。但是对于 IE 和 Edge，它几乎在 1 秒后开始并停留 1 秒。

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

【问题讨论】：

我建议您尝试使用 Async 进行测试：true。检查它是否有助于解决问题。看起来当请求被执行时，gif 的执行被停止。这可能是导致此问题的原因。
@Deepak-MSFT 但是在不同的浏览器中会有所不同吗？在FF中它工作得很好。在 IE 和 Edge 中它也可以正常工作，只是延迟了几毫秒，然后就可以正常工作了。
我认为在这几毫秒内你的请求被执行，然后 GIF 开始工作。每个浏览器都使用不同的浏览器引擎。这取决于该浏览器引擎。因此输出可能因浏览器而异。

标签： jquery internet-explorer firefox microsoft-edge gif

【解决方案1】：

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

您可以参考以下方法了解更多信息。

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

【讨论】：