HTML5 Canvas image valt soms weg in IE9

vrijdag 15 april 2011 16:17

Acties:

0 Henk 'm!

Topicstarter

Dag GoT-ers,

Ik zit met een probleempje, ik wil graag een plaatje inladen in een html5 canvas. Nu wordt dat op internet 1 miljoen keer voorgedaan, dat is het probleem niet. Het probleem is dat dit plaatje in IE9 (en lager met ExCanvas ook) soms wel, en soms niet geladen wordt.

Ik heb het gereproduceerd op http://thomhubers.nl/testcase/

Firefox, Chrome, Opera, etc. allemaal geen enkel probleem. IE9 laat hem soms wel, en soms niet zien. Ik kan er geen logica in ontdekken. Als ik ExCanvas gebruik (niet in de testcase) doen IE6 tm IE8 hetzelfde als IE9, dus soms wel, soms niet.

Onder staat de code van de testcase.

Ik heb drie vragen:
1. Zien jullie de symptomen überhaupt met IE9, of is het alleen op mijn PC?
2. Kennen jullie het probleem?
3. Is er/weten jullie de oplossing?

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testcase</title>
<script type="text/javascript">
draw = function() {
    var a_canvas = document.getElementById("a");
    if (a_canvas.getContext) {
        var ctx = a_canvas.getContext("2d");                        // Get the context.
        ctx.clearRect(0,0,a_canvas.width,a_canvas.height);          // Clear the last image, if it exists.
        img = new Image();
        img.src = "http://thomhubers.nl/testcase/image.png";
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        }
    }
}
</script>
</head>

<body onload="draw();">
<canvas id="a" width="340" height="340"></canvas>
</body>
</html>

Edit:
Ik heb ontdekt dat het vaker voorkomt bij grotere (lees zwaardere) afbeeldingen. Maar img.onload vangt toch het laden af?

[ Voor 4% gewijzigd door Thomzh op 15-04-2011 16:38 ]

vrijdag 15 april 2011 17:30

Acties:

0 Henk 'm!

R4gnax

Thomzh schreef op vrijdag 15 april 2011 @ 16:17:

Edit:
Ik heb ontdekt dat het vaker voorkomt bij grotere (lees zwaardere) afbeeldingen. Maar img.onload vangt toch het laden af?

Er vindt een race conditie plaats tussen het inladen van het bestand en het toevoegen van de load event listener. Voeg eerst de load listener toe aan het image element en zet pas daarna de src property. Dat zou wel consistent moeten werken.

zaterdag 16 april 2011 13:24

Acties:

0 Henk 'm!

Thomzh

Topicstarter

Bedankt voor je reactie!

Hoewel het logisch klinkt en ik het meteen ging proberen, maakt het toch geen verschil. Ik heb nu dit aangepast:

JavaScript:

        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        }
        img.src = "http://thomhubers.nl/testcase/image.png";

Het vreemde is ook dat het alleen in IE gebeurt. Want het laden zo toch niet significant langer duren in IE dan in andere browsers?

zaterdag 16 april 2011 16:35

Acties:

0 Henk 'm!

R4gnax

Thomzh schreef op zaterdag 16 april 2011 @ 13:24:
Bedankt voor je reactie!

Hoewel het logisch klinkt en ik het meteen ging proberen, maakt het toch geen verschil.

Declareer je img variable eens correct met var ...
(En gebruik meteen netjes addEventListener / attachEvent )

zaterdag 16 april 2011 21:51

Acties:

0 Henk 'm!

Thomzh

Topicstarter

Hartelijk dank, het gebruiken van addEventListener heeft geholpen!

Ik ben niet te beroerd iets bij te leren en vraag me af, waarom gebeurde het alleen in IE en ging het in de andere browsers wel goed?

En, als dit niet netjes is, doen (nagenoeg) alle tutorials het dan fout? Ik heb lang zitten zoeken, maar iedereen deed het op dezelfde manier.

maandag 18 april 2011 07:54

Acties:

0 Henk 'm!

Bosmonster

*zucht*

IE heeft een bug dat als de onload op een image niet getriggered wordt als deze al is geladen. Als een afbeelding bijvoorbeeld uit de cache komt kan dit het geval zijn. Het gedrag is uiteindelijk onvoorspelbaar.

Het meest veilige is dus de source zetten na het binden van een event-listener.

woensdag 20 april 2011 13:30

Acties:

0 Henk 'm!

R4gnax

Thomzh schreef op zaterdag 16 april 2011 @ 21:51:
En, als dit niet netjes is, doen (nagenoeg) alle tutorials het dan fout? Ik heb lang zitten zoeken, maar iedereen deed het op dezelfde manier.

Het kan iets met de garbage collector te maken hebben. Als het image element niet netjes in een gedeclareerde variable gestopt wordt of via een andere weg bereikbaar is, dan kan IE's garbage collector vinden dat er geen referentie meer naar is en het element opruimen. Het moment waarop dat gebeurt is min of meer willekeurig en kan zijn nog voor het plaatje gedownload is en de event handler gedraaid heeft.

woensdag 20 april 2011 21:25

Acties:

0 Henk 'm!

Thomzh

Topicstarter

Beiden bedankt!

Onderwerpen