I'm trying to preload images on my web page. I've seen a lot of discussions about it and most of them suggest to create an Image object then edit the src attribute. However this doesn't work on the latest versions of Chrome and Firefox. The request is marked as "pending" until the image is actually shown on the page and then I can notice a little delay before the image to be shown. Even creating an actual img tag on the page (with display:none) doesn't work until the image is shown. And finally when I try the following code, only the last image of the loop is actually loaded
var img = document.getElementById('some_visible_image');
for(var i=1;i<5;i++)
for(var j=1;j<3;j++){
img.src = 'images/'+i+'_'+j+'_green.png';
img.src = 'images/'+i+'_'+j+'_orange.png';
img.src = 'images/'+i+'_'+j+'_red.png';
}
So how can I reduce the loading time of the images (without using large sprites)?
You need to create instance for every image
// redirect after all the images are preloaded
function redirect() {
location.href = "yourtargetpage.html";
}
// should solve the first-time-load problem
var loads = 0;
function loaded() {
// the total number of images needed to load
if(++loads==42) redirect();
}
// if all the images aren't loaded in 3 seconds, don't wait further
setTimeout(redirect, 3000);
for(var i=1;i<5;i++)
for(var j=1;j<3;j++){
var img = new Image();
img.src = 'images/'+i+'_'+j+'_green.png';
if(img.complete) loaded(); // if cached, onload isn't fired sometimes
else img.onload = loaded; // fires for the first time the page loads
}
or the src is overwritten before the image has a chance to load.
To show your images immediately after the first load, you may run this script on a different page, wait until every image
I found the solution, thanks to Jan Turoň's answer. Here is my code :
for(var i=1;i<=5;i++)
for(var j=1;j<=3;j++){
var img = new Image();
img.src = 'images/'+i+'_'+j+'_green.png';
var img = new Image();
img.src = 'images/'+i+'_'+j+'_orange.png';
var img = new Image();
img.src = 'images/'+i+'_'+j+'_red.png';
var img = new Image();
img.src = 'images/'+i+'_'+j+'_grey.png';
}
Try visibility:hidden; instead of display:none;
Related
Well this is a strange one for me.
I'm moving my game from ASCII to tile graphics and I have a problem.
After setting up an image pre-loader I get errors telling me that various stuff is undefined.
Here is the image loading function:
function preload(){
characterImage = new Image();
characterImage.src = "images/character.png";
groundImage = new Image();
groundImage.src = "images/ground.png";
wallImage = new Image();
wallImage.src = "images/wall.png";
doorImage = new Image();
doorImage.src = "images/door.png";
windowImage = new Image();
windowImage.src = "images/window.png";
creatureImage = new Image();
creatureImage.src = "images/creature.png";
stairImage = new Image();
stairImage.src = "images/stairs.png";
nullImage = new Image();
nullImage.src = "images/null.png";
}
Other than that I did not touch anything other than
<body id="body" onload="preload();">
Anyone have any idea what's happening here?
EDIT: I've found the problem, it's that the images aren't loaded before the main script executes. duh.
Onload only fires after everything is loaded (including images)
- so preloading at that point seems.. silly?
Either simply add them to the HTML, and start the game in the onload event
OR
Execute the preload function in < head > and count the number of loaded images by adding:
imageX.onload = function(){ if (++number==total) startGame() }
to each of them (number=0 and total=7 being global variables)
This assumes nothing else needs to be loaded.. A combination may be needed..
<body onload="preload();" >
this means that when the body is loaded, the brower will executes the preload();
Im' trying to display a basic animation while an image loads, in html.
Is this the correct way to do it?
//display the (small image) animation
var preloader = new Image();
preloader.src = 'img/preload.gif';
$('#myDiv').append(preloader);
//load big image and hide peload animation when finished
var img = new Image();
img.onload = function () { $(preloader).hide(); preloader = null; } ;
img.src = 'img/bigImage.jpg';
$('#myDiv').append(img);
I'm not sure that is correct: although it works in my browser, the small animation is always loaded, even if the big image has already been loaded and is in cache. Is there a way to de-activate this, or think or another way to handle the preload of an image with a small animation?
Thanks
Here's how I'd do it:
var preloader = new Image(),
img = new Image(),
div = document.getElementById('myDiv');
img.onload = function () {
preloader = null;
div.innerHTML = '';
div.appendChild(this);
};
img.src = 'img/bigImage.jpg';
// if it's not in cache or not loaded (has no size), show the preloader
if (! (img.complete || img.width+img.height > 0) ) {
preloader.src = 'img/preload.gif';
div.innerHTML = '';
div.appendChild(preloader);
}
When I play my game and click space I show a pause screen with info and images. However the images dont show for like 5 seconds after the page is loaded. I guess this is because they are still loading. How can I prevent canvas from running until the images are loaded?
http://www.taffatech.com/Snake.html
click space straight away.
then click it again, wait 6-10 seconds and press it again.
this is the code for showing the images:
if(level == 1)
{
var img = new Image();
img.src = 'egg.png';
con.drawImage(img,350,40);
}
else if(level ==2)
{
var img = new Image();
img.src = 'baby.png';
con.drawImage(img,350,40);
}
else if(level ==3)
{
var img = new Image();
img.src = 'adult.png';
con.drawImage(img,350,40);
}
else
{
var img = new Image();
img.src = 'ultimate.png';
con.drawImage(img,350,40);
}
You just need to delay the execution of other scripts until the image you desire has been loaded. In your JavaScript, whenever you want to preload your image, you can use the following code as a guideline:
function onImageLoad(e) {
// Put code here to start your canvas business.
};
var image = new Image();
image.addEventListener('load', onImageLoad);
image.src = 'the/path/to/your/image.whatever'
Your onImageLoad function could render your image to the canvas (so the image load happens when you press pause), or you could have this script execute at the beginning and the function simply stores the image into a global variable. Up to you!
Hope this helps :)
You can keep all the image paths in an array and load all the images before starting
var imageObjects = [];
function loadImages(images, onComplete) {
var loaded = 0;
function onLoad() {
loaded++;
if (loaded == images.length) {
onComplete();
}
}
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.addEventListener("load", onLoad);
img.src = images[i];
imageObjects.push(img);
}
}
function init() {
alert("start game");
// use imageObjects which will contain loaded images
}
loadImages(["egg.png", "baby.png", "adult.png", "ultimate.png"], init);
waitForImages jQuery plugin
GitHub repository.
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
Is there any way, how to synchronize gif animations? Problem is that if they have same timing, but are loaded in different time, it can looks strange. I don't know, for example by some javascript "refresh" or reload or something else...
GIF animations are not scriptable. The best you can do is load them via JavaScript, then insert them both into the DOM after they've loaded.
Something like this:
var img = new Image();
var imgCount = 0;
img.onload = loadCount;
img.src="....."
var img2 = new Image();
img2.onload = loadCount;
img2.src="....."
function loadCount() {
imgCount++;
if(imgCount==2) {
//insert IMG tags into DOM
}
}
I want to load 4 images from background showing a load bar to the client
and when the images will be downloaded i want to set them as background images to 4 div blocks.
I am looking for something like this.
var myImages = new Array();
for(var i = 0; i < 4; i++)
myImages[i] = new Image();
//load images using the src attribute
//and execute an on load event function where to do something like this.
var div0 = document.getElementById('theDivId');
div0.style.backgroundImage = myImage[index];
Is there any way to set a background image using an Image javascript object?
You can do something close to what you had. You don't set an image background to be an image object, but you can get the .src attribute from the image object and apply that to the backgroundImage. Once the image object has successfully loaded, the image will be cached by the browser so when you set the .src on any other object, the image will load quickly. You could use this type of code:
var imgSrcs = [...]; // array of URLs
var myImages = [], img;
for (var i = 0; i < 4; i++) {
img = new Image();
img.onload = function() {
// decide which object on the page to load this image into
// this part of the code is missing because you haven't explained how you
// want it to work
var div0 = document.getElementById('theDivId');
div0.style.backgroundImage = "url(" + this.src + ")";
};
img.src = imgSrcs[i];
myImages[i] = img;
}
The missing part of this code is deciding which objects on the page to load which image into when the image loads successfully as your example stood, you were just loading each one into the same page object as soon as they all loaded which probably isn't what you want. As I don't really know what you wanted and you didn't specify, I can't fill in that part of the code.
One thing to watch out for when using the .onload event with images is you have to set your .onload handler before you set the .src attribute. If you don't, you may miss the .onload event if the image is already cached (and thus it loads immediately).
This way, the image shows up instantly all in one once it's loaded rather than line by line.
function setBackgroundImage(){
imageIsLoaded(myURL).then(function(value) {
doc.querySelector("body > main").style.backgroundImage = "url(" + myURL + ")";
}
}
function imageIsLoaded(url){
return new Promise(function(resolve, reject){
var img = new Image();
try {
img.addEventListener('load', function() {
resolve (true);
}, false);
img.addEventListener('error', function() {
resolve (false);
}, false);
}
catch(error) {
resolve (false);
}
img.src = url;
});
}