ejci/favico.js

Chrome + image() method

Closed this issue · 3 comments

On latest Chrome 44.0.2403.130 m (64-bit), image() method no longer works. You can see the problem even on your demo page http://lab.ejci.net/favico.js/. Clicking on button "Set Icon" removes the old icon from the tab, but doesn't append the new one.

Affected seems to be only 0.3.9, 0.3.7 works as expected.

ejci commented

I will look into it

Hello
I faced this issue and found out that the cause is that image is not loaded at the moment it is used for drawing on canvas, so it results empty canvas.

This can be solved by one of two ways:

  1. draw canvas only after onload event is fired
  2. use initial image element, that is passed to image(), without creating new image element... in this case developers can trigger image() only after their own onload listener fires.

I am facing the same issue.
I am pre-loading my two images like this:

<img src="/styles/skins/xxx/assets/favicon.ico" style="display: none" id="def-favicon">
<img src="/styles/skins/xxx/assets/favicon-dot.ico" style="display: none" id="dot-favicon">

The Apache is serving these files with the cache headers.
The browser knows these files before I set the icon image.
The JS is caching the getElementById results in some variables and I use these to call the image method:

// page init phase
self.favicon = new Favico();
self.faviconDefImage = document.getElementById('def-favicon');
self.faviconDotImage = document.getElementById('dot-favicon');

// at some point
// time to play with the icon
// reset to default
self.favicon.image(self.faviconDefImage);
document.title = 'my page';
// ...

if (counter > 0) {
    self.favicon.image(self.faviconDotImage);
    document.title = '(' + counter + ') ' + 'my page';
}

I am seeing requests done to get the images from the server even if these are already retrieved by the browser.