CODEWITHSUNDEEP
javascriptjquery
user431619
user431619

Reputation:

jquery load for preloading background images

I have a container, holding 3 tabs, when clicking the a tab, the container gets a new class - When it gets the class, it changes the backgroundImage in the CSS, and it changes the the Content in the tab container - My problem is that the background images it rather heavy, and it PNG files, because i need the transparency, so I cant change them to JPG's or so...

So I was wondering if there was a way, that I could preload the background image, before changing the content in the tab container, maybe with the .load() function or something like it? The script I have so far is: 

$(".tabs-content div.tabpage").hide(); // Initially hide all content
$(".tabs li:first").attr("id", "current"); // Activate first tab
$(".tabs-content div:first").fadeIn(); // Show first tab content
$('.tab-container a').click(function(e) { //If only tabs, change to .tabs a
    e.preventDefault();
    var className = $(this).attr("name")
    $(document).find(".tab-container").attr("class", "grid_9 tab-container " + className);
    if ($(this).closest("li").attr("id") == "current") { //detection for current tab
        return
    } else {
        $(".tabs-content div.tabpage").hide(); //Hide all content
        $(".tabs li").attr("id", ""); //Reset id's
        $(this).parent().attr("id", "current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
    }
});

Upvotes: 2

Views: 5998

Answers (4)

enur
enur

Reputation: 1

You can use the JavaScript Image object. Something like this:

var img = new Image();
img.src = "http://yourserver/yourimage";

This will load the image. More info here (but I have not checked the content of the article myself): http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Upvotes: 0

Esteban
Esteban

Reputation: 3139

You could load a hidden image and change it when the image finishes loading, please check this question's answer, I'd like to avoid duplicating code it's already in SO.

Upvotes: 0

WinHtaikAung
WinHtaikAung

Reputation: 414

$('IMG').attr("src","URL here! ");

Upvotes: 1

Vincent Cohen
Vincent Cohen

Reputation: 878

This might be the easiest way for you to preload the images:

$.fn.loadImages = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$.loadImages(['your-image.png','your-image2.png','your-image3.png']);

If that does not work, try to load them inside the jquery.load like:

$.fn.loadImages = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(window).load(function(){
      $.loadImages(['your-image.png','your-image2.png','your-image3.png']);
});

Upvotes: 0

Related Questions