Question

我正在使用createObjectURL从客户端加载图像。有时，图像很大，所以我想放一个＆＃34; loading＆＃34;那里有GIF动画。

我有一个容器div（fileDisplay）和一个img（imgDisplay）。

fileDisplay将背景设置为动画gif。所以，当imgDisplay正在加载一个大文件时，你会看到加载gif。当imgDisplay完成加载时，它会覆盖gif。所以，它仍在那里，但你没有看到。我认为应该没问题。一切都很好 - 只要img是一个正方形，它会扭曲img比例。

但是，如果加载到imgDisplay中的图像调整为正确的比例而不是正方形（fileDisplay尺寸为45x45像素），您仍然会在后台看到gif。

所以我需要的是能够关闭动画gif（fileDisplay上的背景url = none），或用另一个div或其他东西覆盖它。但只有在图像完全加载时才会出现。

我现在可以看到，在尝试了我能想到的一切之后，没有办法改变背景，打开/关闭div等等。似乎一切都被处理完毕，然后最终的结果都被一次性绘制，而不是逐步绘制，就像它是VB应用程序一样。

任何人都可以帮我解决如何做到这一点 - 我假设可以做到。而且我认为解决方案是＆＃34;承诺。＆＃34;我已经找了样品，看了我能找到的东西，但似乎无法掌握它。

＆＃34; uploadButton on change＆＃34;触发此代码：

imgSrc = window.URL.createObjectURL(this.files[0]);
//document.getElementById("imgDisplay" + justNumber).src = imgSrc;
getImgSize(imgSrc, useImgSize);

评论行只是将图像显示为45x45。但getImgSize函数计算大小并显示调整大小的图像 - 即问题发生时。只是尝试加载不是正方形的图像，您将看到问题。

这里有一个完整的小提琴：https://jsfiddle.net/msith718/xfuv79b3/334/

Answer 1

为了做到这一点，你想在将新图像加载到div中时从父div中删除gif / img元素。你将使用element.removeChild（）函数。

＆＃13;

df['Matchfinal'] = np.where((df['Match']|df['Match 2']), True, False)

＆＃13;

Answer 2

以下是解决此问题的一种方法https://jsfiddle.net/xfuv79b3/353/。因为您想要在加载图像后更改某些内容，所以我需要在调用onload事件后的某处添加代码。我选择将id传递给我的imgLoader，该imgLoader被传递给一旦加载后处理图像的回调。然后，一旦img元素加载了新图像，最后使用该id修改div的背景。你有什么

getImgSize(imgSrc, useImgSize, justNumber);
//...
img.onload = function() {
  fn({
    width: img.width,
    height: img.height
  },id);
}
//...
document.getElementById("imgDisplay" + id).onload=function(){
  document.getElementById('fileDisplay'+ id).style.background='none';
}
//Also to reset the background if upload is canceled
document.getElementById("fileDisplay" + justNumber).style.background = '';

额外注意

从您对vb的引用和绘制我猜测您的背景更适合处理所有交互并保存应用程序的所有数据或状态的主循环。 Javascript与此非常不同，因为用户交互是通过异步事件发生的。这意味着如果需要在某个回调中，必须显式传递数据。

这样想。您的程序以静止状态启动，但正在侦听发生某些变化的事件。如果发生事件（例如用户单击按钮），程序将调用事件处理程序。这种情况异步发生意味着两件事。其中唯一可用的数据是传递到处理程序的数据和从其父作用域可用的数据。其中两个意味着必须从该事件处理程序调用任何后续操作或数据处理。因此，每个事件处理程序必须执行所需的所有操作，并且在返回到静止状态之前，任何状态更改程序的更新。然后你的程序等待下一个事件。

这是非常简化的（例如，可以同时触发多个事件）并且希望有用，但是一旦你掌握了它，javascript就会更有意义。我建议用javascript阅读事件驱动编程，因为我确信有更好的教程和解释，但希望这能让你朝着正确的方向前进。

删除背景网址，但仅在图片完全加载后

2 个答案:

额外注意