Question

当src的{{1}}属性加载了dataURI时，我无法触发onLoad处理程序。 Here is the jsFiddle

这似乎是浏览器兼容性问题。

Handler在Firefox中按照预期点火。
处理程序仅在Chrome中触发一次。
处理程序在IE中按预期启动。

我希望每次将dataURI加载到<img>时触发处理程序，即使加载的dataURI与先前的dataURI相同。

我怀疑这与Google Chrome中的缓存有关。使用“普通图片加载”，可以通过向网址like here添加<img>来解决此问题。

有关如何强制Chrome实际加载dataURI的任何想法，即使它已被缓存了吗？

澄清：

Firefox中的行为＆amp; IE符合我的要求。我希望Chrome能够表现出同样的行为......

Answer 1

对于Chrome ，您可以使用

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

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

对于资源管理器

JSFiddle为JQuery提供错误。它根本不加载。尝试在常规html文件中测试代码。

Answer 2

就Chrome / Safari问题而言，您的事件委派仅适用于第一个现有元素。请参阅此更新的小提琴：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);
});

<img/> onload处理程序无法为dataURI触发

2 个答案: