Question

I’m having trouble pre loading background images. This is my attempt but still seems to not be working – ie. there is still a delay seeing the image when i call showAjaxLoader(“#mytarget”). Does anybody have any suggestions?

CSS:

div.entryform-ajax-loader {
    background-image:url(../images/preloader-entry-form.gif);
}

Script:

var ajax_loader = $('<div />').attr('class', 'entryform-ajax-loader');

function showAjaxLoader(target)
{
    $(target).append(ajax_loader);
}

function hideAjaxLoader(target)
{
    ajax_loader.remove();

Answer 1

Add a div to your head which has the source as your image, in this case, image will be loaded before the actual page loads.

<div style="display:none">
<img src="../images/preloader-entry-form.gif">
</div>