CODEWITHSUNDEEP
javascripthtmlcss
Randomizer
Randomizer

Reputation: 515

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.

Upvotes: 1

Views: 50

Answers (1)

Aslan French
Aslan French

Reputation: 543

Instead of img.style.background = ""; try this: img.style.background = "transparent"; or perhaps you might try this: img.style.display = "none";

Upvotes: 1

Related Questions