<img> onload handler无法触发dataURI

我在使用dataURI加载<img>的src属性时无法启动onLoad处理程序。 Here is the jsFiddle。<img> onload handler无法触发dataURI

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

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

我想每次将dataURI加载到<img>时，即使正在加载的dataURI与先前的dataURI相同，也会触发该处理程序。

我怀疑这与Google Chrome中的缓存有关。使用“普通图片加载”时，可以通过在URL中添加?refresh={timestamp}来解决此问题（like here）。

任何想法如何迫使Chrome实际加载dataURI，即使它被缓存？

澄清：

在Firefox & IE符合我的要求的行为。我希望Chrome展示相同的行为...

来源

2014-01-20 Ivo Renkema

检查我的答案，更新它 – Ergec

对不起，但为什么你需要在同一图像上多次触发加载事件？这可能会导致未来许多开发人员的混淆。任何图像修改都会改变结果base64。考虑改变你的逻辑或请解释你的动机 – veritas

1.为什么你需要多次更新相同的uri相同的''？ 2.为什么即使使用'.load'也需要监听？这听起来像是一个设计问题。 – Fresheyeball

使用Chrome可以使用

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

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

对于浏览器

的jsfiddle给出了错误的jQuery。它根本不加载。尝试在常规的html文件中测试代码。

来源

2014-01-23 20:56:28 Ergec

谢谢，就是这样！（问题出现在Chrome中;在FF和IE中运行良好。） –

-1

就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); 
});

来源

2014-01-20 13:51:01

这改变了行为，这是**不**需要什么。我不想创建第3或第4项。关键是''必须保持原状。 dataURI需要多次复制到同一个元素中;如我原来的小提琴中所示。 –

<img> onload handler无法触发dataURI

回答

相关问题