छवि लोड पर क्यों नहीं दिखती है, लेकिन रीफ्रेश पर दिखाती है?

Question

मैं एचटीएमएल 5 में कैनवास तत्व के साथ खेल रहा हूं और मैंने एक असाधारण व्यवहार देखा है। प्रारंभिक लोड पर, एक छवि जो मैं प्रदर्शित कर रहा हूं वह प्रदर्शित नहीं होती है। हालांकि, जब मैं ब्राउज़र को रीफ्रेश करता हूं, तो यह उचित रूप से प्रदर्शित होता है। मैंने आईई 9 और क्रोम का उपयोग किया है। दोनों समान व्यवहार करते हैं। जावास्क्रिप्ट कोड इस तरह दिखता है:

window.onload = load; 
function load() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    context.fillRect(0, 0, 640, 400); 
    var image = new Image(); 
    image.src = "Images/smiley.png"; 
    context.drawImage(image, 50, 50); 
} 

आयत सही ढंग से दोनों बार खींचता है, यह स्माइली कि केवल एक ब्राउज़र ताज़ा करने पर पता चलता है।

मैं एचटीएमएल 5 और जावास्क्रिप्ट सीखने की प्रक्रिया में हूं। मुझे यकीन है कि मैं बस कुछ बेवकूफ कर रहा हूं, लेकिन मैं इसे समझ नहीं सकता।

Answer 1

छवियां असीमित रूप से लोड होती हैं, इसलिए ताज़ा करने के बाद ही इसे जल्दी से लोड किया जाता है क्योंकि यह कैश किया जाता है। आम तौर पर यह तब तक लोड नहीं होता है जब आप drawImage पर कॉल करते हैं। onload का उपयोग करें:

var image = new Image(); 
image.src = "Images/smiley.png"; 
image.onload = function() { 
    context.drawImage(image, 50, 50); 
}; 

Answer 2

यह (मेरे लिए केवल IE9 के लिए) के रूप में अच्छी तरह से मेरे साथ हुआ वैसे भी, मैं एक सरल समाधान मिल गया।

कैनवास की पृष्ठभूमि को प्रारंभिक छवि में सेट करें जिसे आप प्रदर्शित करना चाहते हैं।

var canvas = document.getElementById("canvas"); 
canvas.style.background="url('image.png')"; 

यह काम करना चाहिए!

Answer 3

वास्तव में, यहां तक ​​कि केवल image.onload = function() {} का उपयोग करके, आप अभी भी समस्याओं में भाग ले सकते हैं। इस तकनीक का उपयोग करें (यह वही नहीं है जो मैं कह रहा हूं), लेकिन इसे अपने पृष्ठ के नीचे ले जाएं।

उदाहरण के तौर पर, मेरे पास एक सोशल नेटवर्किंग साइट है जो प्रोफाइल फोटो (यूबीआई को डीबी में संग्रहीत) दिखाने के लिए कैनवास का उपयोग करती है, और इसे कैनवास पर प्रिंट करती है, फिर लोगो को ओवरले करें।

<section id="content"> 
    <article id="personalbox" > 
     <h2>Hi! My name is {profile_name}</h2> 
     <a id="friendbutton" href=""><img src="views/default/images/friend.png" width="12" height="12" /><span>Add {profile_name} as a friend?</span></a> 
     <video id="profilevideo" width="240" height="144">DEBUG: Video is not supported.</video> 
     <canvas id="profilecanvas" width="240" height="144" >DEBUG: Canvas is not supported.</canvas> 
     <a id="gallerytextlink" href="gallery.html" >Click to visit {profile_name} Gallery</a> 
     <table id="profileinfotable1"> 

...

</section> 

<script type="text/javascript"> 
    function init() { 
    var cvs = document.getElementById("profilecanvas"); 
    var ctx = cvs.getContext("2d"); 
    var img = new Image(); 
    img.src = "uploads/profile/{profile_photo}"; 
    img.onload = function() { 
     // Ignore. I was playing with the photo. 
     ctx.drawImage(img, 42, 32, 186, 130, cvs.width/2 - (186-42)/2, cvs.height/2 - (130-32)/2, 186-42, 130-32); 
     drawLogo(cvs,ctx); 
    } 
    } 

    function drawLogo(cvs,ctx) { 
    var logo   = "Enter Logo Here."; 
    ctx.fillStyle  = "rgba(36,36,36,0.6)";   
    ctx.strokeStyle = "rgba(255,255,255,0.3)"; 
    ctx.font   = "bold italic 6pt Serif"; 
    ctx.textAlign  = "left"; 
    ctx.textBaseline = "middle" ; 

    ctx.save(); 
    ctx.strokeText(logo, 4, cvs.height-11); 
    ctx.strokeText(logo, 6, cvs.height-11); 
    ctx.strokeText(logo, 4, cvs.height-9); 
    ctx.strokeText(logo, 6, cvs.height-9); 
    ctx.fillText(logo, 5, cvs.height-10); 
    ctx.restore(); 
    } 

    window.onload = init; 
</script> 

आदर्श रूप में, यह सभी तरह तल पर अंत </body> टैग से पहले जाना होगा, लेकिन मैं इसे उच्च ऊपर मेरे टेम्पलेट प्रणाली की वजह से डाल दिया। जाहिर है, यह स्क्रीन पर कैनवास तत्व खींचा जाने के बाद छवि लोड करने देता है और इनपुट प्राप्त करने के लिए तैयार है।

मैं कैनवास की पृष्ठभूमि को स्थापित करने पर भरोसा नहीं कर सकता, और मुझे रीफ्रेश के साथ संघर्ष करने की कोई इच्छा नहीं है। किसी भी कारण से, img.onload = function() {} के साथ स्क्रिप्ट समेत पर्याप्त नहीं था। इसे कम करें, और अपने आप को सिरदर्द बचाएं।