How to Preload Images Without JavaScript

How to Preload Images without Javascript?

From http://snipplr.com/view/2122/css-image-preloader

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

Preloading images with JavaScript

Yes. This should work on all major browsers.

Most robust way to preload image to prevent visible image load? (Without JS)

1. Progressive JPEG

To avoid the "top to bottom" loading of an image you may use "progressive jpeg" which renders a "blurred" version of the picture during it's loading instead of "top to bottom" :
Ex. : http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html

2. Embedded (encoded in base64)

If you really want to show images and the page at the same time you should encode them as base64 and include them in your page :

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="Sample Image" />

You can do it via PHP or any server side script.

<img src="data:image/jpeg;base64,<?=base64encode(file_get_contents($file_path))?>" alt="Sample Image" />

https://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

3. Disguised as stylesheets (awful hack)

If you want to reaaaaally block rendering before images are loaded, you could double images in your page in a <link rel=stylesheet> tag in the <head> section of your page.

Browsers won't show the page until CSSs are loaded, even though your files are not CSS it will load and cache them, and once loaded the page will render and your images will be loaded from cache.

<html>
<head>
  <link rel="stylesheet" href="your_image_01.jpg" />
  <link rel="stylesheet" href="your_image_02.jpg" />
</head>
<body>
...
  <img src="your_image_01.jpg" alt="Sample Image" />
  ...
  <img src="your_image_02.jpg" alt="Sample Image" />
...
</body>
</html>

Preloading images in Javascript? Without jQuery

Well, you will want to use a function which loads the images at a certain point, so you might as well try to understand onLoad. It's not that hard to grasp.

"onload" is a javascript event that occurs immediately after something is loaded. In other words: onLoad is like a javascript-native function which triggers when something is loaded. That something can be a window (eg: window.onload) or a document. What you want is the document onLoad event, as it triggers when your document is loaded.

Let's provide you with a simple example...

<body onload="preloadMyImages();">

This tells the browser "when you've loaded the document, run the preloadMyImages function".

All you have to do is then use that function to load your images into the client's browser cache.

function preloadMyImages() 
{
    var imageList = [
        "image.gif",
        "example/image.jpg",
        "whatever/image.png"
    ];
    for(var i = 0; i < imageList.length; i++ ) 
    {
        var imageObject = new Image();
        imageObject.src = imageList[i];
    }
}

That practically wraps it up and provides you with a fully working example. Enjoy!

EDIT

Since - according to your comment - you are looking for some more help, I would like to point you to https://stackoverflow.com/a/1038381/2432317 which (as one of many examples) shows how that you can (and probably should - depending on what you're planning do draw on your canvas) use img.onload too.

Yet, as I stated in my comment: it will all depend on where you want to take it. The more you dive into Javascript coding, the more you will understand what's going on. There are several good (partly free) books out there explaining how to code Javascript, use the HTML5 canvas, create preloaders, animations, talk about scopes etc.

A quick check at the big G of search engines turns up ample examples and tutorials too which will be helpfull for you. One of many examples: "How To Draw Images Onto Your HTML5 Canvas" which shows you preloading and looping an animation in a short and crisp tutorial.

But please, don't expect us to code it all for you - it's not going to happen. This is one of the not-so-rare cases where "learning by doing" will actually make you smarter. And if you hit another problem on your way to your final goal, you can always post a new question related to that new problem.

Preloading CSS Images

I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.

Here's a test : http://paragraphe.org/slidetoggletest/test.html

<script>
    var pic = new Image();
    var pic2 = new Image();
    var pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>

Preload images using css

I suppose that method would work, as long as the image isn't dynamically generated. The only issue with preloading using just CSS seems to be that the images download WITH the page, not after it. You can trigger the JavaScript event after the pageload is over.

Further reading: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

How to Preload Images Without JavaScript