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

前端之家收集整理的这篇文章主要介绍了使用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

原文链接:https://www.f2er.com/jquery/182635.html

猜你在找的jQuery相关文章