onload handler fails to fire for dataURI

Question

I am having trouble getting the onLoad handler to fire when an the src attribute of <img> is loaded with a dataURI. Here is the jsFiddle.

This appears to be a browser compatibility issue.

Handler fires as expected in Firefox.
Handler fires only once in Chrome.
Handler fires as expected in IE.

I would like the handler to fire every time a dataURI is loaded into the <img>, even if the dataURI being loaded is identical to a previous dataURI.

I suspect this is related to the cache in Google Chrome. With 'ordinary image loads', this can be solved by adding a ?refresh={timestamp} to the URL (like here).

Any ideas how to force Chrome to actually load a dataURI, even if it is cached?

clarification:

The behavior in Firefox & IE meets my requirements. I would like Chrome to exhibit the same behavior...

Sorry but why do you need to fire a load event multiple times on that same image? This may cause confusion to many developers in the future. Also any image modifications would change the result base64. Consider changing your logic or please explain your motivation — veritas, Jan 23 '14 at 21:12
1. Why do you need to update the same `` with the same uri multiple times? 2. Why do you need to listen for that even with `.load`? This sounds like a design problem. — Fresheyeball, Jan 23 '14 at 21:30
The reason for this design? Here is the short answer: We have some complicated artificial intelligence running on the server, on large image files. In order to prevent multiple uploads/downloads of the same file, we keep it in the client as a dataURI. As the AI progresses on the server, the image is moved from one `` to the next on the client. The above problem occurs if a user uploads the same image twice. Could it have been designed differently/better? Perhaps. But we are already pretty far along in this project. Luckily, there is a simple but effective work-around (see @Ergec) — Ivo Renkema, Jan 24 '14 at 13:04

Ergec · Accepted Answer · 2014-01-23T21:08:42.843

1

For Chrome you can use

<button onclick="$('#copy').attr('src', '');$('#copy').attr('src', $('#original').attr('src'));">copy image</button>

http://jsfiddle.net/AnsME/16/

For Explorer

JSFiddle gives error for JQuery. It doesn't load at all. Try testing code in a regular html file.

edited Jan 23 '14 at 21:08

answered Jan 23 '14 at 20:56

Ergec

11,608
7
52
62

Thanks, that's it! (The problem was in Chrome only; worked fine in FF and IE.) – Ivo Renkema Jan 24 '14 at 12:53

score -1 · Answer 2 · answered Jan 20 '14 at 13:51

-1

As far as the Chrome/Safari issue, your event delegation was only being applied to that first existing element. See this updated fiddle: http://jsfiddle.net/AnsME/11/

var count = 0;
$('button').click(function () {
    var $original = $('#original');
    var $clone = $original.clone();
    $clone.load(function () {
        $('body').append('on load firing number ' + ++count + '<br>' );
    });
    $original.after($clone);
});

answered Jan 20 '14 at 13:51

Casey Foster

5,982
2
27
27

This changes the behavior, which is **not** what is required. I do not want to create 3rd or 4th items. The point is that the `' must stay in place. The dataURI needs to be copied multiple times into that same element; as illustrated in my original fiddle. – Ivo Renkema Jan 20 '14 at 14:03

onload handler fails to fire for dataURI

2 Answers2