删除背景网址，但仅在图像完全加载后 [英] Remove background url but only AFTER an image has fully loaded

问题描述

我正在使用createObjectURL从客户端加载图像.有时，图片很大，所以我想在其中放一个正在加载"的动画gif.

I am loading an image from the client side using createObjectURL. Sometimes, the image is big, so I wanted to put a "loading" animated gif in there.

我有一个容器div(fileDisplay)和一个img(imgDisplay).

I have a container div (fileDisplay) and an img (imgDisplay).

fileDisplay的背景设置为动画gif.因此，当imgDisplay正在加载一个大文件时，您会看到正在加载的gif.完成imgDisplay的加载后，它会覆盖gif.因此，它仍然存在，但是您看不到.我认为应该没问题.一切都很好-只要img是正方形，就会扭曲img比例.

fileDisplay has the background set to the animated gif. So, as imgDisplay is loading a big file, you see the loading gif. When imgDisplay is done loading, it covers the gif. So, its still there, but you dont see. I figured that should be fine. All is well--as long as the img is a square, which distorts the img proportions.

但是，如果加载到imgDisplay中的图像以正确的比例调整大小而不是正方形(fileDisplay尺寸为45x45像素)，您仍然会在背景中看到gif.

But, if the image loaded into imgDisplay is resized with correct proportions and not square (fileDisplay dimensions are 45x45 pixles) you still see the gif in the background.

所以我需要的是能够关闭动画gif(fileDisplay上的background url = none)，或者用另一个div或其他东西覆盖它.但仅当图像已完全加载时.

So what I need is to be able to turn off the animated gif (background url=none on fileDisplay), or cover it with another div, or something. But only when the image has fully loaded.

在尝试了所有我能想到的东西之后，我现在可以看到，没有办法更改背景，打开/关闭div等来执行此操作.似乎所有内容都经过处理，然后立即绘制最终结果，而不是像VB应用程序那样逐渐绘制.

I can see by now, after trying everything I can think of, that there is no way to change backgrounds, turn divs on/off, etc and do this. It seems everything is processed and then the final results are all painted at once as opposed to incrementally as if it were, say, a VB app.

任何人都可以帮助我解决如何执行此操作-我假设它可以完成.我认为解决方案是承诺".我一直在寻找样本，阅读可以找到的东西，但似乎无法理解.

Can anyone help me with working out how to do this--I'm assuming it CAN be done. And I think the solution is "promise." I have looked for samples, read what I can find, but just can't seem to grasp it.

"uploadButton on change"事件会触发以下代码:

The "uploadButton on change" event fires this code:

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

注释行仅将图像显示为45x45.但是getImgSize函数会计算大小并显示调整大小后的图像，这是发生问题的时间.只需尝试加载非正方形的图像，您就会看到问题.

Where the commented line just displays the image as a 45x45. But the getImgSize function calculates the size and displays the image resized--which is when the problem occurs. Just try to load an image that is not square and you will see the issue.

完整的小提琴在这里: https://jsfiddle.net/msith718/xfuv79b3/334/

A complete fiddle is here: https://jsfiddle.net/msith718/xfuv79b3/334/

推荐答案

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

Here is one way of solving this problem https://jsfiddle.net/xfuv79b3/353/. Because you are wanting to change something after the image has loaded we need to add the code somewhere after the onload event has been called. I chose to pass in an id to my imgLoader that gets passed on to the callback that processes the image once loaded. Then finally use that id to modify the background of the div once the img element has loaded the new image. What you ne

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与之非常不同之处在于，用户交互是通过异步事件发生的.这意味着，如果需要在某个回调中传递数据，则必须显式传递数据.

Extra Note

From your reference to vb and painted I'm guessing your background is more geared towards a main loop that handles all of the interactions and holds all the data or state of your application. Javascript is very different from this in that user interactions happen through events which are asynchronous. This means data has to be explicitly passed around if need inside a certain callback.

这样想吧.您的程序以静止状态启动，但是正在侦听表示已发生某些更改的事件.如果发生事件(例如用户单击按钮)，则您的程序将调用事件处理程序.这是异步发生的，意味着两件事.唯一可用的数据是传递到处理程序中的数据以及可从其父范围获得的数据.其次，这意味着必须从该事件处理程序中调用任何后续操作或数据处理.因此，每个事件处理程序必须执行所有需要的操作，并在返回到静止状态之前对程序进行任何状态更改更新.然后您的程序等待下一个事件.

Think about it like this. Your program starts in a resting state, but is listening for events that signal some change has happened. If an event happens (such as a user clicks a button) your program calls an event handler. This happens asynchronously meaning two things. One the only data available to it is the data passed into the handler and the data available from its parent scope. And two it means any subsequent actions or data processing have to be called from that event handler. So each event handler must perform all the actions needed and any state change updates to the program before returning to the resting state. Then your program waits for the next event.

这是非常简化的(例如，可以同时触发多个事件)，希望对您有所帮助，但是一旦掌握了它，javascript就会变得更加有意义.我建议您阅读使用javascript进行事件驱动的编程，因为我敢肯定那里有更好的教程和解释，但是希望这可以使您朝正确的方向前进.

This is very simplified (e.g. multiple events can be fired at the same time) and hopefully helpful, but once you get the hang of it javascript makes a whole lot more sense. I'd suggest reading up on event driven programming with javascript since I'm sure there are much better tutorials and explanations out there, but hopefully this gets you headed in the right direction.

这篇关于删除背景网址，但仅在图像完全加载后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！