jquery load for preloading background images

Question

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

check this http://stackoverflow.com/questions/476679/preloading-images-with-jquery, it doesn't have to be preloaded as a background image. preloading it and then applying it as a background image would be fine. just pre-load them outside any function so they get preloading right away. — Smern, Jul 02 '13 at 12:15
Uhm, there's like a thousand answers in there :) Which one is the correct one? :) — , Jul 02 '13 at 12:24
Most of them would probably work, try the ones with the most votes. — Smern, Jul 02 '13 at 12:34

score 1 · Answer 1 · answered Jul 02 '13 at 12:29

1

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

answered Jul 02 '13 at 12:29

WinHtaikAung

414
2
11

score 0 · Answer 2 · edited Feb 20 '14 at 02:23

0

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/

edited Feb 20 '14 at 02:23

MLK.DEV

453
7
31

answered Jul 02 '13 at 12:23

enur

1
1

score 0 · Answer 3 · answered Jul 02 '13 at 12:27

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']);
});

score 0 · Answer 4 · edited May 23 '17 at 10:31

0

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.

edited May 23 '17 at 10:31

Community

1
1

answered Oct 07 '13 at 10:44

Esteban

3,108
3
32
51

jquery load for preloading background images

4 Answers4