Search code examples
jquerytwitter-bootstrapblockui

BlockUI spinner not loading

I have a page, that when the user clicks a button, I use 'blockUI' (http://malsup.com/jquery/block/) to show a modal message saying, 'Sending' with a spinner.

$('#btnSend').click(function () {
    $.blockUI({ message: '<h4><img src="http://www.example.com/images/busy.gif" /> Sending email...</h4>' });
});

When I copy that URL into a browser, I see the spinning image. However, on the site, it shows an invalid image placeholder, as if the image file isn't there, or it's an invalid URL.

When I 'view source' and copy the URL on the page into a new browser, it works fine. Do I somehow have to pre-load the image?

Solution

  • UPDATE

    Add <img src="http://www.accufinance.com/images/busy.gif" id="loader"/> inside your body tag. Also add this in your css file.

    #loader{
    display: none;
}

    You should change your blockUI code to

    $.blockUI({ message: $('#loader') });

    Make sure your tag is above your $.blockUI script.

    PS: I hope you are not using absolute paths like http://www.accu....../busy.gif and you are using something like /images/busy.gif

    ---------------------------------------------------------------------------------------------------------------------------------

    I added this piece of code from the console on your website 

    $('body').append('<img src="http://www.accufinance.com/images/busy.gif"/>');

    After that gif works perfectly. So the form is submitted before the image could be downloaded. Have the gif in the dom instead of dynamically downloading it.

    Hope it helps.