jquery - 使用 jQuery 更改图像 src 属性并不总是适用于 Chrome/Opera

Question

我有以下代码，用于检索我网站上照片的一小部分高分辨率。其想法是让人们在决定是否购买之前先了解原版的质量:

$('#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 中运行良好

Answer 1

已编辑以表明这不起作用...

乍一看，一个务实的“解决方案”似乎是删除并重新添加图像:

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div>

像这样:

$('#magviewholder').children("img").remove()
$('#magviewholder').append('<img>');

$('#magviewholder>img').attr('onerror','imgError(this)').attr('id','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...');
 });

起初这似乎在所有浏览器中都有效，但现在似乎是间歇性的......