All geek questions in one place

Preloading images in javascript? Without jQuery

There are several questions on the forum, but I could not get a good answer for what I needed.

I get into Canvas and Javascript, and I want to preload some images as soon as the game opens. I made an example of a method that I wanted to create (and did not work)

I have 3 files: "main.html", where the canvas is declared (there is only one in this example), and I'm trying to load the image "ImagePreloader.js", where I preload all the images and "Variables.js", where I have there are variables.

Can someone please help me with this pre-sale image mode or offer me a viable? I think the image does not load because I do not use the onLoad () function, which I could not understand in the tutorials that I have read so far (I know how to apply it to the image, but not to the image array)

main.html:

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script type="text/javascript" src="Variables.js"></script> <script type="text/javascript" src="ImagePreloader.js"></script> <script> // Basic canvas info var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Draw one of the images. Somehow it doesn't work :( context.drawImage(imageArray[3], x, y, width, height); </script> </body> </html>

ImagePreloader.js

 // This should preload the images in imageArray[i] with 0 <= i <= 5 ... right? function preloader() { for(var i=0; i<5; i++) { imageArray[i].src=images[i]; } }

Variables.js

 // array of sources of my images images = new Array(); images[0]="img1.jpg" images[1]="img2.jpg" images[2]="img3.jpg" images[3]="img4.jpg" images[4]="img5.jpg" // Stuff to draw the image var x = 50; var y = 50; var width = 256; var height = 256; // Is this actually an array of images? imageArray = new Image();

Thanks in advance!

+4
source share
3 answers

Well, you'll want to use a function that loads images at a specific point, so you can also try to understand onLoad. This is not so hard to understand.

"onload" is a javascript event that occurs immediately after loading. In other words: onLoad is similar to the javascript-native function, which runs when something loads. It can be a window (for example: window.onload) or a document. What you want is the onLoad event of the document, since it fires when the document loads.

Provide you a simple example ...

 <body onload="preloadMyImages();">

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

All you have to do is use this function to upload images to 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]; } }

This almost completes the job and provides you with a complete working example. Enjoy it!

EDIT

Since, according to your comment, you are looking for additional help, I would like to point you to fooobar.com/questions/442859 / ... , which (as one of many examples) shows how you can (and probably should - in depending on what you plan to do on your canvas) also use img.onload.

However, as I said in my comment: everything will depend on where you want to take it. The more you immerse yourself in Javascript encoding, the more you will understand what is going on. There are some good (partially free) books explaining how to code Javascript, use HTML5 canvas, create preloaders, animations, talk about clouds, etc.

A quick check in the big G search engines includes many examples and tutorials to help you. One of many examples is "" "How to Draw Images on Your HTML5 Canvas" "", which shows how you preload the animation and loop the animation in a short and clear tutorial.

But please do not expect a code from us for you - this will not happen. This is one of the rare cases where “learning by doing” actually makes you smarter. And if you encounter another problem on the way to your ultimate goal, you can always post a new question related to this new problem.

+9
source

You need to make sure that these 5 images are uploaded (uploaded images cannot always be uploaded and ready to use, only onload ensures that the image is ready for use) before using it.

So add a load for the images, then count from the onload function and start the draw after loading 5 of them.

 function prefetchImages(sources){ var images = []; var loadedImages = 0; var numImages = sources.length; for (var i=0; i < numImages; i++) { images[i] = new Image(); images[i].onload = function(){ if (++loadedImages >= numImages) { //ready draw with my images now drawThePainting(); } }; images[i].src = sources[i]; //bind onload before setting src bug in some chrome versions } }; prefetchImages(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]); function drawThePainting(){ // Basic canvas info var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Draw one of the images. Somehow it doesn't work :( context.drawImage(imageArray[3], x, y, width, height); }
+2
source

try it

 put this script in head section <script type="text/javascript"> function preload(arrayOfImages) { for(i = 0 ; i < arrayOfImages.length ; i++) { var img = new Image(); img.src = arrayOfImages[i]; } } preload(['img1.png','img2.png']); </script>
+1
source

Source: https://habr.com/ru/post/1489404/

More articles:


All Articles