Preload Images faster

Question

I'm building a website that contains divs with background images. I'm very new to JavaScript. I want to preload the images so when you go to the site you don't have to wait and view a blank box when the image is loading. I'm using this preload code, but when I go to the site the images are still loading slowly. Is there a way to make this faster?

<script> 
$(document).ready( function() {
    var c = new Image();
    c.onload = function(){
        $("#contenthome").css("background-image", "url(../Images/Homepage.png)");  
    }
    c.src = "url(../Images/Homepage.png)";
});
</script>

This code will run in a matter of milliseconds, so the wait you're experiencing in in your connection to the resources. I'd look into reducing the size of your image(s) in an image editor to speed things up. — Jasper, Dec 03 '13 at 16:18
there's no way in code to make an image load faster. you can only make it load in such a way that it does not block the rest of the page from loading, which you are already doing. — jbabey, Dec 03 '13 at 16:19
Actually there is a way, but that might force you to do large changes to your web site. By using AJAX, you could prepapre the images of the page N while still on the page N - 1, and just update the page N - 1 with the content of the page N instead of going to the page N using a regular link that would reload the page. — Virus721, Dec 03 '13 at 16:20
how heavy are those pictures(kb). can you just make them lighter, that will load them faster — caramba, Dec 03 '13 at 16:20
As commented by Jasper, preload is usefull when you need to load pictures that are not yet displayed. So that when they're displayed, they're already loaded.... in your case, there is apparently no use for a preload. Typical case would be a picture galery with "newt/previous" functionality : when you load an image, you also preload the next one and previous one, so that when the user clicks "next", you only have to display te preloaded image without waiting for it to download as it was down in background — Laurent S., Dec 03 '13 at 16:20
You could try to embed them as base64 data url. this would make them bigger (about 30%), but remove the extra requests for the images. — K.., Dec 03 '13 at 16:20
You could use a "splash" screen with a simple "loading" gif in the center and a single color background. Then use something like `$('img').load(function(e) { var i = $('img').length; /* compare index, if last, fade out splash screen */ })` — SpYk3HH, Dec 03 '13 at 16:22
You might also see here -> http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 — SpYk3HH, Dec 03 '13 at 16:23
Well, this method does have the benefit of not showing the picture at all before it's loaded so the user doesn't see the image gradually appearing on the page. The problem here is that the image source should be just the filename, not the CSS url syntax used now, i.e. the preloading code doesn't actually do anything. — JJJ, Dec 03 '13 at 16:26
Optimize the image. In many cases the size of the image can be reduced by 70% or more, even after saving for web from your favorite image editor. — Kevin B, Dec 03 '13 at 16:44

score 0 · Answer 1 · answered Dec 03 '13 at 16:29

This is not directly approachable but has two solutions.

This question's solution needs some understanding about server side request headers specifying caching information. I am used to appengine so I set expiry to about a month or so. Caching is all about suggesting a browser to "keep the following images with you for a while, don't take from me each time you need them". according to your server side language, it is worth spending so that you will master this important thing in browser environment.
And, you must play some trick if your user should not see a set of blank boxes while the images load. in fact, you style them invisible, and once loaded, you make them visible. since you are using jquery, you can use something like

$(window).load( function(){ $('#showAfterLoadingComplete').show("slow").fadeIn(); }

A page of example is here

score 0 · Answer 2 · answered Dec 03 '13 at 16:47

Try this:

<script> 
$(function() {
    var c = new Image();
    $(c).load(function(){
        $("#contenthome").css("background-image", "url(../Images/Homepage.png)");
        $(this).attr('src','../Images/Homepage.png').show();  
    }).hide();
});
</script>

score 0 · Answer 3 · answered Dec 03 '13 at 17:54

I would suggest employing a different method. Javascript has to wait for the page to load in order to work right, which inherently will introduce a delay.

Why not base 64 encode all your images into css classes in a dedicated css document.

You can use a site like this to convert your images:

http://webcodertools.com/imagetobase64converter

Then paste the Data URI into the background-image property in your css class.

Your eventual markup could look something like this:

<div id="contenthome">[some content]</div>

And your CSS would look something like this:

#contenthome {
    background: [DATA URI] /*I didn't paste the actual URI here, as it would be quite long and unruly */
            no-repeat
            50% 50%;
    background-size: contain;
    display: inline-block;
    height: auto;
    width: auto;
}

You may have to play around with the height, width, background-size, and display properties to get it to show just right.

You could even take a further step and use a cache manifest to explicitly cache your css files so the load times are even faster.

Preload Images faster

3 Answers3