如何防止部分加载的图像显示？

如果你有，比方说，img标签中的3MB图片，加载需要几秒钟的时间。当图像加载时，浏览器有点“打印”它 - 它先显示顶部，然后显示中间，然后显示底部。我如何防止这种情况发生？我宁愿将图像隐藏起来，并在显示的第二个或第二个图像后显示 - 完全加载时。如何防止部分加载的图像显示？

来源

2017-04-15 Ondrej Vrabel

可能重复[如何显示图像只有当它完全加载？]（http://stackoverflow.com/questions/14373683/how-to-show-image-only-when-it-is-completely-加载） – chrki

你是指在标记中定义的图像？如果是这样，上述不会真的适用。但是如果你的意思是你动态添加的那个，它会的。 –

一个办法是给他们一个班，让他们opacity: 0这样他们就不会显示：

<img src="/path/to/image" class="loading">

而且在CSS：

.loading { 
    opacity: 0; 
}

在head，我们覆盖，如果JavaScript的被禁用（所以我们对非JavaScript访问者不是不友好）：

<noscript> 
<style> 
.loading { 
    opacity: 1; 
} 
</style> 
</noscript>

...，然后在你的页面底部的代码，发现所有的图像，并删除类，他们已经加载的时候，和......（见注释）：

(function() { 
    // Get an array of the images 
    var images = Array.prototype.slice.call(document.querySelectorAll("img.loading")); 
    // Hook their load and error events, even though they may have already fired 
    images.forEach(function(image) { 
     image.addEventListener("load", imageDone.bind(null, image)); 
     image.addEventListener("error", imageDone.bind(null, image)); // Could handle errors differently 
    }); 
    // Check to see if any images are already complete 
    checkImages(); 

    function imageDone(img) { 
     img.classList.loading("remove"); 
     images = images.filter(function(entry) { entry != img }); 
    } 
    function checkImages() { 
     images.forEach(function(image) { 
      if (image.complete) { 
       imageDone(image); 
      } 
     }); 
     if (images.length) { 
      // Check back in a second 
      setTimeout(checkImages, 1000); 
     } 
    } 
})();

这是一个皮带和 - 方法。它会主动检查图像是否已完成加载，并且还会反应性地处理图像的load和error事件。从理论上讲，我们不应该需要setTimeout，并且您可能会在没有它的情况下进行测试，但是...

请注意，一旦图像完成，我们删除该类，以使其可见。

来源

2017-04-15 16:11:49

老同学：

为了避免图像的部分显示，因为它呈现，你的大图像保存为进步，而不是基线 JPG格式。

一个进步 JPG呈现为一系列提高质量

一个基线 JPG使从上到下的扫描（你所描述的“打印”）的。

渐进式选项被认为比突然出现的图像或缓慢的顶部到底部渲染你不喜欢的用户友好。渐进式文件变体甚至可以比其基线对应物小。

欲了解更多关于此阅读：The Return of the Progressive JPEG。

来源

2017-04-15 18:08:18 csaetre

我认为这里的每个人都给了你一些很好的答案，我只是想补充一下.3MB对于网络图像来说相当大。不要对用于徽标或布局的图像使用较大的内容。如果您要加载的内容是您想要保持质量的很好的大型真实图像（或提供下载到高品质图形的某些内容），那么您应该只使用更大量的像素数据。。除此之外，如果您执行Google搜索，则会发现大量用于加载图片的解决方案。我将用于较大图像的东西是jQuery/ajax解决方案。

来源

2017-04-15 18:55:30

如何防止部分加载的图像显示？

回答

相关问题