如何快速清空IMG元素？

Question

我已经建立了一个模态图像库。当用户点击下一步查看下一张图片时，我会运行类似的东西：

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

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

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

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

Answer 1

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

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 = '';
   }