如何快速清空IMG元素？

我已经建立了一个模态图库。当用户点击旁边看下图片我运行类似：如何快速清空IMG元素？

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

我的问题是，有来自当用户点击位置旁边的图像实际上改变的延迟。（由于新图像被加载）。我想在用户下一次点击时“清空”图片元素。我试着这样做：

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

无济于事。如何才能“清空”IMG元素，直到新图像开始加载它？

来源

2012-06-26 lisovaccaro

广东话你预载的图片？ – Musa

你试过'img.src =“about：blank”'？ –

有做这三种主要方式。你的问题似乎表明你想创建一个类似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 = ''; 
}

来源

2012-06-26 05:02:32 PleaseStand

可以隐藏图像，然后重新出现。它...

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

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

来源

2012-06-26 03:59:39 alex

我同意，但你在哪里重新显示代码？在img元素的'onload'中？另一个选择是完全移除img元素，然后用新的'src'集合添加一个新的元素。 – nnnnnn

喜欢更多您的建议。当图像完全加载时也不会启动onload？我想在开始加载时显示它。我不知道如何删除和创建新的元素在同一个地方，但。 – lisovaccaro

有[添加和删除元素的几种方法]（http://www.google.com.au/search？Q =添加+和+除去+元素+与+的JavaScript）。 – nnnnnn

如何快速清空IMG元素？

回答

相关问题