2

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

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

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

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

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

4

2 回答 2

5

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

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

    下面的数据 URI 来自编码为 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);

  2. 临时设置，并在时间延迟过去且图像已加载后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 = '';
}

  3. 执行上述操作，但visibility: hidden;改为设置。这可能具有不影响页面布局的优点display: none;。

    // [...]

gi.style.visibility = 'hidden';

// [...]

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.visibility = '';
}
于 2012-06-26T05:02:32.207 回答
1

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

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

// Show
document.getElementById('gallery-image').style.display = "";
于 2012-06-26T03:59:39.180 回答