CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Puddles
Puddles

Reputation: 31

Issue with "loading gif" background-image (IE/Edge)

I am trying to add a loading gif to buttons but am having trouble in Edge and IE. It only sometimes shows on a few buttons.

Basically what I'm doing is dimming the button and then wrapping the button with a span dynamically with jquery that has a background gif loading icon. Unfortunately it is not working in IE or Edge (works on a few buttons but not most).

Javascript to add loading button:

$("body").on("click", ".loading-button", function() {
    $(this).wrap("<span class='disabled-loading-icon'></span>");
    $(this).addClass("disabled-loading");
});

CSS for loading gif:

.disabled-loading {
    opacity: 0.2;
}

.disabled-loading-icon {
    opacity: 1;
    background-image: url("/Images/loader.gif") !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

The routes are fine and it works correctly in Chrome and Firefox.

The html gets added to IE/Edge but doesn't actually do the gif animation all the time, usually just dims and loads the page.

HTML:

<span class="disabled-loading-icon"><a class="button secondary wide center loading-button disabled-loading" href="https://localhost:44327/Login/Login">Continue</a></span>

Any possible work-around or solutions? I think if I manually add the wrapped "span" it will work but i'd prefer not doing that.

Upvotes: 2

Views: 389

Answers (2)

Arunjunai Rajan
Arunjunai Rajan

Reputation: 11

try this.it will help

$("body").on("click", ".loading-button", function(e) {
var $this = $(this);
setTimeout(function() {
    $this.wrap("<span class='disabled-loading-icon'></span>");
    $this.addClass("disabled-loading");
}, 1);
});

Upvotes: 0

Puddles
Puddles

Reputation: 31

After a few hours, I figured it out. For IE/Edge, you need to wrap js in a timeout

    $("body").on("click", ".loading-button", function(e) {
    var $this = $(this);
    setTimeout(function() {
        $this.wrap("<span class='disabled-loading-icon'></span>");
        $this.addClass("disabled-loading");
    }, 1);
});

Upvotes: 1

Related Questions