Preload Images faster

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>

Answers


This is not directly approachable but has two solutions.

  1. 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.

  2. 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


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>

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.


Need Your Help

Rewriting EBP stack return value

assembly linux-kernel stack stack-overflow buffer-overflow

Hi I'm trying to write an overflow exploit for a simple program that I've built. Bellow is the C program that I've written.

TFS Team Query: get all changed work items since a given time

tfs azure-devops

Apparently it is impossible to provide the Changed Date field with a timestamp (format '2009-12-14 10:00:00') when defining a new Team Query. I get the error: "The query failed. You cannot supply a...