Javascript 如何快速清空IMG元素？

我已经建立了一个模态图像库。当用户单击“下一步”以查看下一个图像时，我运行如下操作：

document.getElementById('gallery-image').src = newSRC;

我的问题是，从用户单击图像实际更改位置的旁边开始，存在延迟。（由于正在加载新图像）。我想在用户单击下一步时“清空”图像元素。我试着这样做：

    document.getElementById('gallery-image').src = '';
    setTimeout(function(){
        document.getElementById('gallery-image').src = newSRC;
        }, 100);

无济于事。

---

在新图像开始加载之前，如何“清空”IMG元素？

您可以隐藏图像，然后重新显示它

// Hide
document.getElementById('gallery-image').style.display = "none";

// Show
document.getElementById('gallery-image').style.display = "";

---

有三种主要方法可以做到这一点。你的问题似乎暗示你想创造一种类似于不断变化的幻灯片的效果，所以我写这个答案时就考虑到了这一点

将

src

属性临时设置为1x1透明GIF，而不是空字符串。这与您尝试的方法最为相似，可能是最简单的方法

下面的数据URI来自Internet Explorer 8或更高版本以及其他主要浏览器，应该可以在这些浏览器中使用。使用数据URI可以避免在web服务器上存储单独的文件，并在页面加载时预加载。您可能需要设置img元素的

宽度

和

高度

属性，以保留页面的布局

该代码不会在延时开始时预加载图像（尽管可以这样做），因此，观看者的明显延时是编程延时和加载图像所用时间的总和。只有当浏览器已缓存图像或web服务器位于本地网络上时，加载时间才会接近于零

var gi = document.getElementById('gallery-image');
gi.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
setTimeout(function(){
    document.getElementById('gallery-image').src = newSRC;
}, 100);

临时设置

显示：无

，并使用

onload

功能在延迟时间过去且图像已加载后撤消更改。下面的代码在时间延迟开始时开始加载图像，这取决于观看者的连接速度，可能会导致更一致的明显延迟

var gi = document.getElementById('gallery-image');
var delayElapsed = false;
var imageLoaded = false;

gi.style.display = 'none';

setTimeout(function(){
    delayElapsed = true;
    maybeShowImage();
}, 100);

gi.onload = function() {
    imageLoaded = true;
    maybeShowImage();
};
gi.src = newSRC;

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.display = '';
}

执行上述操作，但设置可见性：隐藏取而代之。这可能具有不影响页面布局的优点，其中

display:none会

// [...]

gi.style.visibility = 'hidden';

// [...]

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.visibility = '';
}

---

我同意，但是你把重播代码放在哪里？在img元素的

加载中

？另一种选择是完全删除img元素，然后使用新的

src

集附加一个新元素。当图像完全加载时，onload是否也会触发？我想在开始加载时显示它。但我不知道如何在同一位置删除和创建新元素。有。您是否尝试过

img.src=“about:blank”

？