CODEWITHSUNDEEP
jquerypreload
Chris
Chris

Reputation: 8412

Pre load background images in jQuery

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();

Upvotes: 1

Views: 4145

Answers (3)

Nazmul
Nazmul

Reputation: 7218

As an altermative solution, you may add this script to your file,

$(function() {
$(document.body).append($("<img />").attr("src", "../images/preloader-entry-form.gif").hide())
});

which will load the image at the beginning of page load. As a result when the function showAjaxLoader will be executed, the image will be loaded without any delay.

Upvotes: 0

Abdul Kader
Abdul Kader

Reputation: 5842

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>

Upvotes: 4

Danzan
Danzan

Reputation: 968

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

In the head of page body or if you need JQuery solution

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Upvotes: 0

Related Questions