कैनवास

Question

पर एकाधिक छवियों को लोड नहीं किया गया है मैंने निम्नलिखित तरीके से चाप का उपयोग करके मंडल बनाया है।

var startAngle = 0; 
 
var arc = Math.PI/6; 
 
var ctx; 
 

 
var leftValue=275; 
 
var topValue=300; \t 
 
\t  
 
var wheelImg = ["http://i.stack.imgur.com/wwXlF.png","http://i.stack.imgur.com/wwXlF.png","cat.png","cock.png", 
 
\t \t \t \t "croco.png","dog.png","eagle.png","elephant.png","lion.png", 
 
\t \t \t \t "monkey.png","rabbit.png","sheep.png"]; 
 

 
function drawWheelImg() 
 
{ 
 
\t var canvas = document.getElementById("canvas"); 
 
    \t if(canvas.getContext) 
 
\t { 
 
\t \t var outsideRadius = 260; 
 
\t \t var textRadius = 217; 
 
\t \t var insideRadius = 202; 
 

 
\t \t ctx = canvas.getContext("2d"); \t 
 

 
\t \t for(var i = 0; i < 12; i++) 
 
\t \t { 
 
\t \t \t var angle = startAngle + i * arc; 
 

 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
\t \t \t ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); 
 
\t \t \t ctx.fill(); 
 
\t \t \t ctx.closePath(); 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
\t \t \t ctx.shadowBlur=3; 
 
\t \t \t ctx.shadowColor="#A47C15"; 
 
\t \t \t ctx.stroke(); 
 
\t \t \t ctx.closePath(); 
 
\t \t \t 
 
\t \t \t ctx.save(); 
 
\t \t \t ctx.translate(leftValue + Math.cos(angle + arc/2) * textRadius, 
 
\t \t \t \t \t \t topValue + Math.sin(angle + arc/2) * textRadius); 
 
\t \t \t ctx.rotate(angle + arc/2 + Math.PI/2); 
 
\t \t \t var img = new Image(); 
 
\t \t \t 
 
\t \t \t img.src = wheelImg[i]; 
 
\t \t \t ctx.drawImage(img,-44, -25,50,40); 
 
\t \t \t ctx.restore(); 
 
\t \t } 
 
    \t } 
 
} \t 
 

 

 

 
function spin() 
 
{ 
 
\t drawWheelImg(); 
 
} 
 

 
drawWheelImg();

<button class="btnSpin" onclick="spin();">Spin</button> 
 

 
<canvas id="canvas" width="550" height="580"></canvas>

समस्या यह है कि यह लोड नहीं होगा जब पहली पृष्ठ लोड है। लेकिन जब मैं स्पिन बटन पर क्लिक करता हूं तो यह सभी छवियों को लोड करेगा।

पता नहीं क्या समस्या है। कोई भी मदद बहुत ही सराहनीय होगी।

नोट:Here in the question एक ही समस्या केवल एकल छवि के लिए img.onload समारोह लेकिन यह द्वारा हल है। यदि सरणी में कई छवियां हैं तो यह काम नहीं कर रही है।

Answer 1

आप छवियों को प्रीलोड करना चाहते हैं।

ऐसा करने के लिए आप </dody> टैग बंद होने से पहले पृष्ठ के निचले हिस्से में लोडिंग शुरू कर सकते हैं।

<script> 
    // an array of image URLs 
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames]; 
    // an array of images 
    var images = []; 
    // for each image name create the image and put it into the images array 
    imageNames.forEach(function(name){ 
     image = new Image(); // create image 
     image.src = name;  // set the src 
     images.push(image); // push it onto the image array 
    }); 
</script>   

छवियों का उपयोग करने वाले कोड में आपको केवल यह जांचने की आवश्यकता है कि उन्होंने अभी तक लोड किया है या नहीं। ऐसा करने के लिए बस छवि complete विशेषता देखें।

// draw the first image in the array 
if(images[0].complete){ // has it loaded 
    ctx.drawImage(images[0],0,0); // yes so draw it 
} 

नोट कि complete लोड मतलब यह नहीं है। यदि आपने एक खराब यूआरएल साबित किया है या कोई और त्रुटि है तो पूरा ध्वज अभी भी सच होगा। पूरा मतलब है कि ब्राउज़र ने छवि से निपटना समाप्त कर दिया है। यदि छवियों में असफल होने की संभावना है तो आपको onload ईवेंट जोड़ना होगा।

हैंडलिंग त्रुटियाँ

आप निश्चित नहीं थे कि एक छवि लोड नहीं होगा आप अनुपलब्ध सामग्री से निपटने के लिए एक रणनीति तैयार करना होगा रहे हैं। आपको प्रश्नों के उत्तर देने की आवश्यकता होगी, क्या मेरा ऐप छवि के बिना काम कर सकता है? क्या छवि प्राप्त करने के लिए वैकल्पिक स्रोत हैं? क्या यह निर्धारित करने का कोई तरीका है कि यह कितनी बार होने की संभावना है? मै इसे होने से कैसे रोकू सकता हूँ?

सरलतम स्तर पर आप कर सकते हैं झंडा एक छवि के रूप तब कोड में आप छवि का उपयोग करने से पहले लोड सेमाफोर के लिए जाँच करेगा onload घटना

// an array of image URLs 
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames]; 
    // an array of images 
    var images = []; 
    // function to flag image as loaded 
    function loaded(){ 
     this.loaded = true; 
    } 
    // for each image name create the image and put it into the images array 
    imageNames.forEach(function(name){ 
     image = new Image(); // create image 
     image.src = name;  // set the src 
     image.onload = loaded; // add the image on load event 
     images.push(image); // push it onto the image array 
    }); 

दौरान छवि वस्तु को अपने स्वयं के सेमाफोर जोड़कर भरी हुई।

// draw the first image in the array 
if(images[0].loaded){ // has it loaded 
    ctx.drawImage(images[0],0,0); // yes so draw it 
} 

महत्वपूर्ण सामग्री

आपको लगता है कि आप अनुप्रयोग फिर से काम करने के लिए आप एक त्रुटि पृष्ठ पर रीडायरेक्ट करना चाहिए यदि कोई समस्या छवि लोड है आवश्यक हैं छवियों है। आपके पास कई सर्वर हो सकते हैं ताकि आप छोड़ने से पहले विभिन्न स्रोतों को भी आजमा सकें।

यदि आपको ऐप को रोकने या वैकल्पिक यूआरएल आज़माने की आवश्यकता है तो आपको onerror इमेज इवेंट को रोकना होगा।

छवियों (100% यकीन है कि छवियों लोड किए गए हैं जब कि एप्लिकेशन चलाता है) के आपके उपयोग को आसान बनाने के लिए आप भागों है कि छवियों केवल जब सभी छवियों को लोड किया जाता है का उपयोग शुरू कर देना चाहिए। ऐसा करने का एक तरीका उन सभी छवियों को गिनना है जिन्हें लोड किया जा रहा है, और छवियों के भार के रूप में गिना जाता है। जब काउंटर शून्य तक पहुंच जाता है तो आप जानते हैं कि सभी छवियां लोड हो चुकी हैं और फिर आप ऐप को कॉल कर सकते हैं।

निम्नलिखित विफल होने पर छवियों को लोड किया जाएगा, यदि वे असफल होते हैं तो यह एक और सर्वर (स्रोत) का प्रयास करेगा जब तक कि कोई विकल्प नहीं है कि आपको उस बिंदु को इंगित करने के लिए उचित त्रुटि पृष्ठ पर रीडायरेक्ट करना चाहिए कि एक बंदर ने एक स्पैनर डाला है काम करता है। यह चित्र लोड मायने रखता है और जब सभी छवियों को लोड किया है तो यह एप्लिकेशन चल रहा है, ज्ञान है कि सभी छवि सामग्री का उपयोग करने के लिए सुरक्षित है में यकीन है कि शुरू कर देंगे।

// Server list in order of preferance 
    var servers = ["https://fakesiteABC.com/", "http://boogusplace.com/", "http://foobarpoo.com.au/"]; 

    // an array of image URLs 
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames]; 
    // an array of images 
    var images = []; 
    // loading count tracks the number of images that are being loaded 
    var loadingImageCount = 0; 
    // function to track loaded images 
    function loaded(){ 
     loadingImageCount -= 1; 
     if(loadingImageCount === 0){ 
       // call your application start all images have loaded 
       appStart(); 
     } 
    } 
    // function to deal with error 
    function loadError(){ // the keyword "this" references the image that generated the event. 
     if(this.retry === undefined){ // is this the first error 
      this.retry = 1; // point to the second server 
     }else{ 
      this.retry += 1; // on each error keep trying servers (locations) 
     } 
     // are the any other sources to try? 
     if(this.retry >= servers.length){ // no 11 
      // redirect to error page. 
      return; 
     } 
     // try a new server by setting the source and stripping the 
     // last server name from the previous src URL 
     this.src = servers[this.retry] + this.src.replace(servers[ this.retry - 1],""); 
     // now wait for load or error 
    } 


    // for each image name create the image and put it into the images array 
    imageNames.forEach(function(name){ 
     image = new Image(); // create image 
     image.src = servers[0] + name;  // set the src from the first server 
     image.onload = loaded; // add the image on load event 
     image.onerror = loadError; // add the image error handler 
     images.push(image); // push it onto the image array 
     loadingImageCount += 1; // count the images being loaded. 
    }); 

अनुपलब्ध सामग्री से निपटने के लिए कई अन्य रणनीतियों रहे हैं। यह सिर्फ कुछ तंत्र का उपयोग करता है और एक सही समाधान परिभाषित नहीं करता है (कोई नहीं है)