非常大的图像显示渐进

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事件为止。