Canvas---Canvas image loading, using JavaScript callback mechanism to implement a picture loader

One drawback of the canvas's drawimage approach is that it will not work when the picture is not loaded.

Of course, in the high-speed game main loop, you can ignore this problem directly, or use Img.complete = = True to make a judgment.

In a place outside the game loop, you can use Img.onload = function () {}; this callback resolves.

However, if you need to implement loading of a large number of images and inform the user of the loading progress, a picture loader is required.

I. Picture Loader principle

1. For each picture, open the corresponding thread to load and modify the value of a variable after the load is completed-loadednum

2. Open a thread to monitor the value of Loadednum and Needloadnum, and invoke the callback function when the load is complete.

3. Because JavaScript does not have a traditional threading mechanism, you use setinterval to emulate these operations.

Two. Use of picture Loader

 var canvas = document.getElementById ("Canvas");        var context = Canvas.getcontext ("2d");        Canvas Adaptive Mikuscaleutil.rejustcanvas (canvas); Picture loader mikuimagemanager.addimg ("Girl01", "http://www.dm123.cn/ecms/d/file/2015-02-01/        Ae20761d9c6ff6e87989634a586a1906.jpg "); Mikuimagemanager.addimg ("Girl02", "http://www.dm123.cn/ecms/d/file/2015-02-04/        C6913e96129402d88f344e1c7b8e3c8e.jpg "); Mikuimagemanager.addimg ("Girl03", "http://www.dm123.cn/ecms/d/file/2015-02-03/        071624b53ca02eca0d5696b7759f9b2e.jpg "); Mikuimagemanager.addimg ("girl04", "http://www.dm123.cn/ecms/d/file/2015-02-03/        4ef08ed1842579ff38244479b1b721ba.jpg ");        Mikuimagemanager.initimgs (Loadimage,main);        Main functions function Main () {Context.drawimage (mikuimagemanager.getimg ("Girl01"), 0,0); } function LoadImage (loaded,total) {console.log (loaded+ "|")        +total); }

1. Using the Addimg method to add a picture to the loader

2. Call Initimgs (Loadimage,main); Method Starter Loader

LoadImage This callback function is called every 50 milliseconds, outputting the number and total number of images that are currently loaded. You can use it to update the progress bar.

Main this callback is called when the load is complete.

3.GETIMG (name), the method can be used to obtain a picture object before the name.

Three.:

Four. Source code

Tool Class 01-Picture management tool function Mikuimagemanager () {};//private Property Mikuimagemanager._imgarray = new Array ();        Mikuimagemanager._loadednum = 0;//Public Method mikuimagemanager.addimg = function (NAME,SRC) {var img = new Image ();        IMG.SRC = src;        Img.name = name;    img.loaded = false; Mikuimagemanager._imgarray.push (IMG);};    mikuimagemanager.getimg = function (name) {var target;        Mikuimagemanager._imgarray.foreach (Function (img) {if (img.name = = name) {target = img;    }    }); return target;}; Mikuimagemanager.initimgs = function (onloadcallback,loadovercallback) {Mikuimagemanager._imgarray.foreach (    Function (img) {mikuimagemanager._loadimg (IMG);    }); var timer = setinterval (function () {//console.log (mikuimagemanager._loadednum+ "|")        +mikuimagemanager._imgarray.length);        Onloadcallback (mikuimagemanager._loadednum,mikuimagemanager._imgarray.length); if (mikuimagemanager._loadednum = = = Mikuimagemanager._imgarray.length) {//CONSOLE.LOG ("Full picture loading complete");            Clearinterval (timer);        Callback Loadovercallback (); }},50);};/    /Private Method mikuimagemanager._loadimg = function (img) {var checktime = 0;        Set Timer var timer = setinterval (function () {checktime = checktime + 50; Console.log ("Load Time:" +img.name+ "|"        +checktime);            If the picture is loaded complete if (Img.complete = = True) {mikuimagemanager._loadednum + +;            Console.log ("Loading complete:" +img.name);        Clear Timer clearinterval (timer); } (},50);};



Canvas---Canvas image loading, using JavaScript callback mechanism to implement a picture loader