非常大的图像显示渐进

Very large image displaying progressive

本文关键字：显示 图像 非常      更新时间：2023-09-26


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

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

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

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

我想在视觉上删除它，并且只在浏览器中完全加载和渲染后显示它们。

我也不能更改图像大小，因为这个网络应用程序是为了让用户缩放图像，一直到原始大小的100%，所以我必须加载完整的2800x2800并将其缩小。

有人知道我如何隐藏图像直到渲染出来吗？我可以隐藏它直到加载，但这基本上就是我要做的，也是我想要删除的渐进渲染显示。感谢

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

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

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

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

您可以将css设置为"hidden"，并在调用onload事件之前在图像的位置放置一些文本（或加载微调器等）。

相关文章：