javascript - html 上的图像 - 缓存

Question

我有一个网页，其中有一个图像。但图像是在页面打开几秒钟后加载的。我想在图像尚未加载时显示加载gif，然后每2秒检查一次图像是否已加载。加载图像后，我想用图像替换加载 gif。我编写了以下代码:

    <script language="javascript" type="text/javascript">
        function checkImage(src) {
            var img = new Image();
            img.onload = function () {
                // code to set the src on success
                $('#img1').attr('src', 'imageOriginal.jpg');
                $('#img1').removeAttr('width');
                clearInterval(interval);
            };
            img.onerror = function () {
                countErrors = countErrors + 1;
            };

            img.src = src; // fires off loading of image
        }
        var interval;
        var countErrors = 0;
        $(document).ready(function () {
            $('#img1').attr('width', '620px');
            interval = window.setInterval(function () { checkImage('imageOriginal.jpg?id=' + countErrors); }, 2000);
        });
    </script>

                <img borderstyle="solid" bordercolor="black" borderwidth="1px" id="img1" alt="Screenshot" style="max-width:620px;" src="loading.gif" />

有时有效，有时无效。我什至添加了一个 id 参数来防止缓存。但即使图像已经加载，也会显示加载 gif。我该如何解决这个问题？

Answer 1

如果您的脚本中涉及 jQuery，我见过的一种方法是将 onload 事件附加到图像，与您所使用的类似，只不过 onload 事件在图像实际加载时触发。发生此事件后，您可以隐藏加载图像。我认为让加载图像成为其自己的单独图像并根据主图像是否加载来隐藏/显示它会更有意义。

示例:

$('#img1').load(function() {
    $('#loadingImage').hide();
    $('#img1').show();
});

无需定期进行此检查。加载事件只需要附加一次，并且会在图像加载完成时可靠地触发。