如何快速清空 IMG 元素？答案

【问题标题】：How to empty IMG element quickly?如何快速清空 IMG 元素？
【发布时间】：2012-06-27 08:56:21
【问题描述】：

我已经建立了一个模态图像库。当用户单击下一步查看下一张图片时，我会运行以下内容：

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

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

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

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

【问题讨论】：

你试过img.src = "about:blank"吗？

标签： javascript image

【解决方案1】：

有三种主要方法可以做到这一点。您的问题似乎暗示您想要创建类似于 slide projector 更改幻灯片的效果，因此我在编写此答案时考虑到了这一点。

暂时将src 属性设置为1x1 透明GIF 而不是空字符串。这与您尝试做的最相似，也许是最简单的方法。

下面的数据 URI 来自 Blank image encoded as data-uri，应该可以在 Internet Explorer 8 或更高版本以及其他主要浏览器中使用。使用数据 URI 可以避免在 Web 服务器上存储单独的文件并在页面加载时预加载它。您可能需要设置 img 元素的 width 和 height 属性以保留页面的布局。

此代码不会在时间延迟开始时预加载图像（尽管可以这样做），因此对查看器的明显延迟是编程时间延迟的总和以及加载图像所需的时间。只有当浏览器已经缓存了图片或者网络服务器在本地网络上时，加载时间才会接近于零。
```
var gi = document.getElementById('gallery-image');
gi.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
setTimeout(function(){
    document.getElementById('gallery-image').src = newSRC;
}, 100);
```

临时设置display: none;，并使用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 = '';
}

执行上述操作，但改为设置visibility: hidden;。这样做的好处可能是不会影响display: none; 会影响的页面布局。

// [...]

gi.style.visibility = 'hidden';

// [...]

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我同意，但是你把重新显示的代码放在哪里？在 img 元素的 onload?另一种选择是完全删除 img 元素，然后使用新的 src 集合附加一个新元素。
喜欢你的建议。当图像完全加载时，onload 也不会触发？我想在它开始加载时显示它。我不确定如何在同一个地方删除和创建新元素。
有several ways to add and remove elements。