在Chrome/Opera中并不总是应用jQuery来更改图像源属性
在Chrome/Opera中并不总是应用jQuery来更改图像源属性
提问于 2015-04-08 15:22:55
我有以下代码，用于检索我的网站上的一小部分高分辨率的照片。这个想法是让人们在决定是否购买之前先看一眼原作的质量：
$('#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，它在火狐/IE11中运行良好
回答 6
Stack Overflow用户
回答已采纳
发布于 2015-05-06 03:35:20
看起来你的问题有很好的文档记录，从下面的帖子中可以明显看出：
- 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)
我建议您将一个新图像加载到内存中，然后当这个新图像的load事件触发时，更改实际图像的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...');
});Stack Overflow用户
发布于 2015-04-29 02:30:15
对进行了编辑，以表明这不起作用...
起初，似乎一个实用的“解决方案”是删除并重新添加图像：
<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...');
});起初，这似乎适用于所有浏览器，但现在似乎也是间歇性的……
Stack Overflow用户
发布于 2015-04-08 15:33:58
您可以使用 Image onload 事件。
当图像加载完成时，将在图像元素上调用此事件处理程序。
代码
var url = '/photos/original-snippet.php?id=<?php echo $nID?>&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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29508382
复制相关文章
相似问题