使用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...');
 });

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

Answer 2

从以下帖子中可以明显看出您的问题已得到详细记录：

1. 更改 src 时图像加载的 jquery 回调

2. 捕获动态更改其来源的图像的加载事件

3. 图像加载时的 jQuery 回调（即使图像已缓存）

我建议您将新图像加载到内存中，然后当该新图像的加载事件触发时，更改实际图像的 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...');
});

演示版