JavaScript implementation picture preload "callback function, multiple pictures"

Use JS to achieve a set of picture animation effect or use HTML5 canvas to render a series of pictures and other cases, the picture needs to be fully loaded to run the animation effect. More than one picture preloaded code is involved in this program. When a succession of cases involves picture preloading, it is necessary to consider encapsulating this functionality as a common method.

(1) The following is the JS implementation picture Preloading method Loadimages ():

JS Code

2. //Implementation of a series of images preloaded
4. //Parameter sources: Image information associative array
6. //Parameter callback: callback function--executes this function immediately after the picture preload is complete.
8. function loadimages (sources, callback) {
10. var count = 0,
12. Images ={},
14. Imgnum = 0;
16. for (src in sources) {
18. imgnum++;
20. }
22. for (src in sources) {
24. IMAGES[SRC] = new Image ();
26. Images[src].onload = function() {
28. if (++count >= Imgnum) {
30. callback (images);
32. }
34. }
36. IMAGES[SRC].SRC = Sources[src];
38. }
40. }

(2) Call the pre-load function in JS:

JS Code

2. //Store associative array of image link information
4. var sources = {
6. Ietohell: "Img/ietohell.jpg",
8. Fuckie: "Img/fuckie.jpg"
10. };
14. //Call picture pre-load function, implement callback function
16. Loadimages (sources, function(images) {
18. //to-do Something
20. Ctx.drawimage (Images.ietohell, 20,20,100,100);
22. Ctx.drawimage (Images.fuckie, 140,20,100,100);
24. });

Precautions:

(1) Bind the Image.onload event first, then load the picture

JS Code

2. IMAGES[SRC] = new Image ();
4. Images[src].onload = function() {
6. if (++count >= Imgnum) {
8. callback (images);
10. }
12. }
14. IMAGES[SRC].SRC = Sources[src];

Cause: If the picture is loaded from the cache, it is so fast that it does not load when it is time to bind the event, and naturally does not trigger the binding event.

(2) The difference between the for...in loop and the For loop

For loop for iterated algebraic groups (array)

For...in loop for iterating over objects (object, {}) or associative arrays (hash array)

JavaScript implementation picture preload "callback function, multiple pictures"