非常大的图像显示渐进式答案

【问题标题】：Very large image displaying progressive非常大的图像显示渐进式
【发布时间】：2023-03-05 06:34:01
【问题描述】：

我正在尝试将一些相当大的图像加载到 Web 应用程序中。这些图像中最大的可以是 2800x2800。我加载它们，显示，一切正常。

我的问题是，一旦加载它们：

var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
  //display image
}

大图像在页面上逐渐显示，从上到下就像正在加载一样。

我想直观地删除它，并且只在完全加载并在浏览器中呈现后显示它们。

我也无法更改图像大小，因为这个网络应用程序旨在让用户将图像缩放到原始大小的 100%，所以我必须加载完整的 2800x2800 并将其调整为小。

有谁知道我如何隐藏图像直到它被渲染？我可以隐藏它直到加载，但这基本上就是我正在做的，它是我想要删除的渐进式渲染显示。谢谢

【问题讨论】：

【解决方案1】：

在<img> 标签上使用onload 属性，如下所示：

<img src="huge.jpg" style="display:none" onload="this.style.display='block'">

用任何你想要的效果代替，但onload 是你的钩子。

演示：http://jsfiddle.net/DfCUQ/1/ ^{（注意：每次加载时更新演示中的?nocache=X）}

【讨论】：

【解决方案2】：

您可以使 css 可见性为“隐藏”，并在图像的位置放置一些文本（或加载微调器等），直到调用 onload 事件。

【讨论】：