If you are creating web apps is essential that you know how to preload images in Javascript.
This is the code I use without using any Javascript library:
var image = new Image();
image.addEventListener("load", imageLoaded, false);
image.src = "example.png";
image.addEventListener("load", imageLoaded, false);
image.src = "example.png";
When the image (example.png) is loaded, the event load is triggered and the program goes to the function imageLoaded.
Example
This example code shows how to preload multiple images in Javascript:
<!doctype html>
<html>
<head>
<title>Preload images in Javascript</title>
<meta charset="utf-8" />
<script type="text/javascript">
var imageFiles = new Array("a.png", "b.png", "c.png");
var imagesLoaded = new Number(0);
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var images = new Array();
alert("It will proceed to preload the images.");
for(i=0; i<imageFiles.length; i++)
images[i] = loadImage(imageFiles[i]);
}
function loadImage(url)
{
var image = new Image();
image.addEventListener("load", imageLoaded, false);
image.src = url;
return image;
}
function imageLoaded()
{
imagesLoaded++;
if (imagesLoaded == imageFiles.length)
alert("The images have been preloaded.");
}
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>Preload images in Javascript</title>
<meta charset="utf-8" />
<script type="text/javascript">
var imageFiles = new Array("a.png", "b.png", "c.png");
var imagesLoaded = new Number(0);
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var images = new Array();
alert("It will proceed to preload the images.");
for(i=0; i<imageFiles.length; i++)
images[i] = loadImage(imageFiles[i]);
}
function loadImage(url)
{
var image = new Image();
image.addEventListener("load", imageLoaded, false);
image.src = url;
return image;
}
function imageLoaded()
{
imagesLoaded++;
if (imagesLoaded == imageFiles.length)
alert("The images have been preloaded.");
}
</script>
</head>
<body>
</body>
</html>
Source code
You can download the source code of the example clicking here.
Do you like this article? Share it with your friends with this link: http://miloq.blogspot.com/2011/05/preload-images-in-javascript.html
ReplyDeleteThanks for reading! :-)
Hi
ReplyDeleteI am using phpMotion... And I am not sure how to do this... We have a file that is album_view.htm and then an album_view.php... So how should I go about installing this...
I install the js in a folder... Then I insert the code at the head of my main_1.htm... But here there are no images... all all the images are at album_view.htm... but there is no head in this file...
Thx in advance
Alberto
Thanks.. Perfect script!
ReplyDeleteIts good. :) How about building objects with event listeners? So you have multiple images loading on some frequent event:
ReplyDeletetextInput.addEventListener('input',callback('...load different images here'),false);
And, you need to return the widths of each image to an array so you can animate it later. The images are huge so you want to get the widths after they load,but,you need to use widths array outside of the callback. Just a crazy scenario to think about.
I am testing the crazy scenario I asked about. Check it out. On input event it preloads images to a separate div off screen. Then removes them onload and appends them to the desired location. Then on keyup, if images loaded length is equal to the input value length it shows the the images. For now, if images are not showing the first time, just hit backspace then type again. http://www.marketavenues.com/projects/prototypingevents/
ReplyDeleteI think it would be solid if I could time the load events and then use the time to setTimeout in keyup?
DeleteSorry I don't mean to blog up your blogger, but , I added a timer that waits for the each image to load then shows them and tells you how long it took. Let me know if you want me upload this to an online environment so we can all work on something that will be 100% effective. I chose this crazy scenario because its the most extreme plausibility and if this works then anything written in a like fashion will be 100%. http://www.marketavenues.com/projects/prototypingevents/
DeleteWhy your blog? Don't worry about it. I just liked you example and ran with it.
Hi! Just a question: why imagesLoaded = new Number(0) instead of just 0?
ReplyDeletenice post
ReplyDeleteAwesome blog youu have here
ReplyDelete