Clash Royale CLAN TAG#URR8PPP

Remove loading bar as background image in CSS using JS

I have a custom made loading bar. I am using it by hiding him behind the back of a photo so whenever the photo changes the background appears and when the photo was loaded the loading bar hides behind the photo.
Recently I had to use transport images and now the loading bar is visible behind the image.

The id for the photo is "generated" and this is the css.

#generated
border: 1px solid #021a40;
cursor: pointer;
background: url(../images/loading400px.gif) 50% no-repeat;



I have a JS function that changes this image.

function AsynchronouslyDownloadImage(address, img)
img.src = "static/images/shader.svg";
let downloadingImage = new Image();
downloadingImage.onload = function ()
// This img.style.background is what I thought will make my background disappear but this isn't working
img.style.background = "";
img.src = this.src;
;

downloadingImage.src = imagesEndpoint;



Per the long comment, the ïmg.style.background is what I thought will work.
img is a reference to an element that his id=generated.

1 Answer
1

Instead of

img.style.background = "";

try this:

img.style.background = "transparent";

or perhaps you might try this:

img.style.display = "none";



img.style.background = "";



img.style.background = "transparent";



img.style.display = "none";


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.