Remove Background Url But Only After An Image Has Fully Loaded

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. I have a container div (fileDis

Solution 1:

So to do this you want to remove the gif/img element from the parent div when you load the new image into the div. Which you would do with the element.removeChild() function.

//Put this code as soon as you want to remove the loading gif//This gets the node or the element you want to removevar node = document.getElementById("gif");
//This removes the node from the parent divdocument.getElementById("parentDiv").removeChild(node);

Solution 2:

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 canceleddocument.getElementById("fileDisplay" + justNumber).style.background = '';

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.

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.