javascript - 非常大的图像显示渐进式

Question

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

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

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

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

我想从视觉上删除它，并且仅在完全加载并在浏览器中呈现后才显示它们。

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

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

Answer 1

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

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

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

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

Answer 2

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