使用jQuery更改图像src属性并不总是在Chrome/Opera中应用

我有以下一些代码，用于检索我网站上照片的小高分辨率部分。这个想法是让人们在决定是否购买之前，先看一下原来的品质：

$('#magviewplus').attr('src','/photos/original-snippet.PHP?id=<?PHP echo $nID?>&x='+left+'&y='+top).load(function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});

由于某种原因，它是间歇性的。 fiddler显示该片段总是加载的，但它仅显示有时。即使不显示，load()事件中的代码运行正常。

所以它认为它已经加载，fiddler显示它已经加载，但是大约50％的时间没有显示在哪里。

它在家里的桌面上往往会少一些，而当我出门时，笔记本电脑上更多的是发生，所以我想知道这个资源有时与某些时候有点慢的加载有关吗？

有任何想法吗？

编辑：这实际上似乎限于Chrome& Opera，它在Firefox / IE11中工作正常

解决方法

看起来你的问题有详细的记录，从以下帖子可以看出：

> jquery callback on image load when changing the src
> Capturing load event for images dynamically changing their source
> jQuery callback on image load (even when the image is cached)

我建议你将新的图像加载到内存中，然后当这个新图像的加载事件触发时，更改实际图像的src并执行其他任何需要完成的操作。原始图像保持原样，并且附加到其它任何其他事件(除了加载)应保持不变：

$(new Image()).attr('src','/photos/original-snippet.PHP?id=<?PHP echo $nID?>&x=' + left + '&y=' + top).load(function() {
    $('#magviewplus').attr('src',this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...');
});

DEMO