Javascript 超大图像显示逐行扫描

我正在尝试将一些相当大的图像加载到web应用程序中。这些图像中最大的可以是2800x2800。我把它们装进去，展示出来，一切正常

我的问题是，一旦使用以下方法加载它们：

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

大图像从上到下依次显示在页面上，就像正在加载一样

我希望从视觉上删除这些内容，并仅在浏览器中完全加载和渲染后显示它们

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

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

---

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

您可以将css可见性设置为“隐藏”，并放置一些文本（或加载微调器等）在调用onload事件之前，替换图像。

使用

替换你想要的效果，但是

onload

是你的钩子

---

演示：（注意：每次加载时更新演示中的

？nocache=X

）

使用

替换你想要的效果，但是

onload

是你的钩子

---

演示：（注意：每次加载演示时，都要更新演示中的

？nocache=X

）

我很有信心您不会找到解决方案。您无法控制浏览器在视觉上将图像绘制到页面上。您是否在多个浏览器上测试过此功能？这听起来像是对浏览器本身的限制，甚至可能是对计算机的限制，这取决于浏览器如何使用系统资源。我很有信心，恐怕你不会找到解决方案。您无法控制浏览器在视觉上将图像绘制到页面上。您是否在多个浏览器上测试过此功能？这听起来像是浏览器本身的限制，甚至可能是计算机的限制，这取决于浏览器如何使用系统资源。这正是我正在做的。直到

onload

，图像才被添加到页面中，但一旦添加，它将逐步显示，并在浏览器中呈现。这正是我正在做的。直到

onload

，图像才被添加到页面中，但一旦添加，它就会逐渐显示，并在浏览器中呈现。小提琴效果很好，但我看不出我的问题仍然存在。我可能需要深入了解我是如何加载我的图像的，也许我的服务器上的资源存在一些问题：/Great hack solution+1 fiddle工作得很好，但我看不出我的问题仍然存在。我可能需要深入了解我是如何加载我的图像的，也许我的资源在我的服务器上有一些问题：/Great hack solution+1

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