Canvas --- Canvas image loading, using the javascript callback mechanism to implement an image loader, javascriptcanvas

Source: Internet
Author: User

Canvas --- Canvas image loading, using the javascript callback mechanism to implement an image loader, javascriptcanvas

The drawImage method of canvas has a disadvantage, that is, when the image has not been fully loaded, calling it will be ineffective.

Of course, you can ignore this problem directly in the high-speed main loop of the game, or use img. complete = true for determination.

You can use the img. onload = function () {}; callback solution outside the game loop.

However, if you need to load a large number of images in advance and inform the user of the loading progress, you need an image loader.

I. Principles of image Loaders

1. For each image, enable a corresponding thread for loading. After loading, modify the value of a variable-loadedNum.

2. Enable another thread to monitor the values of loadedNum and needLoadNum. When loading is complete, call the callback function.

3. Because javascript does not have a traditional thread mechanism, use setInterval to simulate these operations.

Ii. Use of the image Loader

Var canvas = document. getElementById ("canvas"); var context = canvas. getContext ("2d"); // canvas adaptive MikuScaleUtil. rejustCanvas (canvas); // image 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 function main () {context. drawImage (MikuImageManager. getImg ("girl01"), 0, 0);} function loadImage (loaded, total) {console. log (loaded + "|" + total );}

1. Use the addImg method to add images to the loader.

2. Call initImgs (loadImage, main); Method to start the loader

The loadImage callback function is called every 50 milliseconds to output the number and total number of currently loaded images. You can use it to update the progress bar.

The main callback is called after the load is complete.

3. getImg (name). You can obtain the image object by using the previous get name.

Iii .:


4. Source Code

// Tool type 01-image management tool function MikuImageManager () {}; // Private Attribute 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 ("All images loaded"); clearInterval (timer); // callback loadOvercallBack () ;}, 50) ;}; // Private method MikuImageManager. _ loadImg = function (img) {var checkTime = 0; // set the timer var timer = setInterval (function () {checkTime = checkTime + 50; // console. log ("loading time:" + img. name + "|" + checkTime); // if the image is loaded, if (img. complete = true) {MikuImageManager. _ loadedNum ++; // console. log ("loaded:" + img. name); // clear the timer clearInterval (timer) ;}, 50 );};














Zookeeper

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.