使用jQuery更改图像src属性并不总是在Chrome / Opera中应用
我有以下一些代码用于检索我网站上的一张照片的高分辨率部分。 在决定是否购买之前，我们的想法是让人们一睹原始品质：
$('#magviewplus').attr('src', '/photos/original-snippet.php?id=&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中运行良好
从以下post中可以看出，您的问题似乎已被充分记录：
-
更改src时对图像加载的jquery回调
-
捕获图像的加载事件，动态更改其源
-
jQuery回调图像加载（即使图像被缓存）
我建议你将一个新图像加载到内存中，然后当这个新图像的加载事件触发时，更改实际图像的src并执行其他任何需要完成的操作。 原始图像保持不变，附加到其上的任何其他事件（除了加载）应保持不变：
$(new Image()).attr('src', '/photos/original-snippet.php?id=&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
编辑，以表明这不起作用……
起初似乎一个实用的“解决方案”是删除并重新添加图像：
像这样：
$('#magviewholder').children("img").remove() $('#magviewholder').append('![]()
'); $('#magviewholder>img').attr('onerror','imgError(this)').attr('id','magviewplus').attr('src', '/photos/original-snippet.php?id=&x='+left+'&y='+top).load(function() { window.clearInterval(maginterval); magtimer=3; maginterval=window.setInterval(magViewCountdown,1000); $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); });
这似乎最初在所有浏览器中都有效，但现在似乎也是间歇性的……
您可以使用Image onload事件。
图像加载完成后，将在图像元素上调用此事件处理程序。
码
var url = '/photos/original-snippet.php?id=&x='+left+'&y='+top; var img = new Image(); img.onload = function () { //When load's sucessfully $('#magviewplus').prop('src', url); window.clearInterval(maginterval); magtimer=3; maginterval=window.setInterval(magViewCountdown,1000); $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); }; img.onerror = function () { //When load's fails }; img.src = url; //Set URL
使用.load（）加载图像：
$('#magviewplus').load('/photos/original-snippet.php?id=&x='+left+'&y='+top, function() { window.clearInterval(maginterval); magtimer=3; maginterval=window.setInterval(magViewCountdown,1000); $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); });
问题可能与客户端资源缓存策略有关，该策略取决于浏览器及其设置。 如果是这样，您可以通过将随机数作为参数附加到地址字符串来强制重新加载图像。 从服务器的角度来看，这个参数没有意义，但是对于浏览器来说它是一个全新的资源，实际上它也是一样的。 下面的示例说明了此方法：
$('#loadbtn').click(function(){ $('#msg').html("loading..."); $('#myimg').attr("src", "http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1" + "&rnd=" + Math.random()); }); $('#myimg').load(function(){ $('#msg').html("loaded"); });
#loadbtn { margin: 16px; } #msg { margin: 16px; }
loading...
尝试将de“name”属性放在标记中，其值与“id”属性相同。
通过这种方式jquery甚至在chrome中检测到属性并正确更改，在jquery的oldersversión中我忽略了如果这有效，希望这个帮助