Pre load CSS sprite Images with jQuery

Question

I want to Pre-load two sprites images with jquery or JavaScript, These sprites image doesn't shows until page is fully loaded. i have tried this, this ,this, this and many more, but none of them works for me. However a simple CSS HTML based solution works. But I have many pages so I cannot use CSS HTML solution, Rather I want use some jquery solution so as to work in one single .js file that all page has access.

CSS Html based solution that works.

    <div id="preload">
    <img src='_ls-global/images/layout-images/layout.png'/>
    <img src='_ls-global/images/layout-images/layout2.png'/>
    </div>

    <style>
    #preload{ display: none;}
    </style>

As this CSS HTML based solution is working, i implemented it using jQuery like this but it is not working.

        $(window).load(function(){

        $("<div/>", {
          "id": "preload",
          "css": { "display" : "none"},
        }).prependTo("body");
        $("<img src='_ls-global/images/layout-images/layout.png'/>").appendTo("#preload");
        $("<img src='_ls-global/images/layout-images/layout2.png'/>").appendTo("#preload");

        });

Please suggest any possible way to do it.

Thanks.

Well, for me this code works, although I do not have the sprites..., but FF tries to load them. But maybe use $(function () {...}) instead of $(window).load()... — DerWaldschrat, Aug 17 '12 at 07:14
using `$(function () {...})` doesn't work as it fire on document ready state. — , Aug 17 '12 at 07:23
Why? Then you can perfectly insert something to the body so that it is loaded... — DerWaldschrat, Aug 17 '12 at 08:12
And maybe $(window).load doesnt work because there are some issues with it and it is deprecated: http://api.jquery.com/load-event/ Anyway, I do not know what your problem is because this code is perfectly working for me... What do you mean exactly with "that doesnt work for me" — DerWaldschrat, Aug 17 '12 at 08:16
Well, obviously it didnt load first, because you start loading when loading the rest of the page is done... The you could do the following: create a script file with the body of your .load handler (the content of the function), and include it immediately after the body tag... — DerWaldschrat, Aug 17 '12 at 08:27
i have a script file placed in head section in which above jquery code is placed, are you suggesting that i shoud move it to body section. — , Aug 17 '12 at 08:31
Yes, but you should remove the event callback, just the body of the function... $("
", { "id": "preload", "css": { "display" : "none"}, }).prependTo("body"); $("").appendTo("#preload"); $("").appendTo("#preload"); — DerWaldschrat, Aug 17 '12 at 08:33
Hm, I cannot imagine why everything which I and the other solutions you have posted suggest is not working. Please specify exactly what the difference of the JS and the plain HTML-CSS is. And with exactly I mean you should describe the behaviour of your page which is relevant for that. — DerWaldschrat, Aug 17 '12 at 08:45
As i described above if i use CSS HTML based solution, my top navagation and category images(layout2.png) load before page shows up. If i use jquery solution top navagation and category images loads after the page shows up. i.e normally loading from css. — , Aug 17 '12 at 08:50
And how do you notice that? e.g. is there a short delay when first displaying the sprites? — DerWaldschrat, Aug 17 '12 at 09:02
yes with css-html no delay top navigation and category comes up with images. with jquery it takes some time for images to come. — , Aug 17 '12 at 09:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15455/discussion-between-tall-boy-and-derwaldschrat) — , Aug 17 '12 at 09:07

mbokil · Answer 1 · 2013-03-12T14:21:36.667

2

For batch image preloading:

window.onload = function() {
    //preload images: set path, enter image names
    var path = '../images/';
    var images = [
        'my_image.png',
        'my_image2.png'
        ];

    for (image in images) {
        new Image().src = path + images[image];
    }
}

edited Mar 12 '13 at 14:21

answered Mar 12 '13 at 14:07

mbokil

3,202
30
22

score 0 · Answer 2 · answered Aug 24 '12 at 20:52

Why that difficult ?!?

just do:

<script>
    $(window).load(function(){
        new Image().src = '_ls-global/images/layout-images/layout.png';
        new Image().src = '_ls-global/images/layout-images/layout2.png';
    });
</script>

that does the trick. NO need for any markup.

Pre load CSS sprite Images with jQuery

2 Answers2