Question

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

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

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

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

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

Answer 1

有三种主要方法可以做到这一点。你的问题似乎暗示你想创建一个类似于slide projector更改幻灯片的效果，所以我已经记住了这个答案。

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

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

此代码不会在时间延迟开始时预加载图像（尽管可以这样做），因此观察者的明显延迟是编程时间延迟的总和以及加载图像所需的时间。如果浏览器已缓存图像或Web服务器位于本地网络上，则加载时间将仅接近零。
```
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 = '';
}

Answer 2

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

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

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

如何快速清空IMG元素？

2 个答案: