JQuery slideshow的一个小问题(如何发现及解决过程)
第一阶段,试用slideshow
在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下:
第二阶段,发现问题
在打开页面所以的正常测试都没问题,最后领导发现,当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,然后变化为第一张图片,刚变化(有淡入的的效果)完成,就突然跳转到最后一张图片。当我改为:
发现停留在其它tab后,回到页面时,图片显示的顺序正确,间隔时间也正确,4000毫秒,但是显示出来的时候,是直接跳转式,也不是淡出形状,似乎animate的1500毫秒没有启动任何效果。过一段时间会恢复正常,但是这种现象的时间长短,跟停留在别的tab时间长短似乎成正比。
第三阶段,解决问题
最后发现原因,是因为jquery的本质是单线程[2],当停留在别的tab中,任务中将next_silde()函数积压过多所致。最后找到的解决方案[4]如下:
在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下:
代码如下:
function next_slide() { var $active = $('#bitware-overlay img.active'); if ($active.length == 0) $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass('last-active'); $next.addClass('active'); $next.css({opacity: 0.0}); $next.animate({opacity: 1.0}, 1500,function(){ $active.removeClass(); }); } $(function() { setInterval("next_slide()", 4000); });
第二阶段,发现问题
在打开页面所以的正常测试都没问题,最后领导发现,当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,然后变化为第一张图片,刚变化(有淡入的的效果)完成,就突然跳转到最后一张图片。当我改为:
代码如下:
function next_slide() { var $active = $('#bitware-overlay img.active'); if ($active.length == 0) $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass('last-active'); $next.addClass('active'); $next.css({opacity: 0.0}); $next.animate({opacity: 1.0}, 1500); $active.removeClass(); setTimeout("next_slide()", 4000); } $(function() { setTimeout("next_slide()", 4000); });
发现停留在其它tab后,回到页面时,图片显示的顺序正确,间隔时间也正确,4000毫秒,但是显示出来的时候,是直接跳转式,也不是淡出形状,似乎animate的1500毫秒没有启动任何效果。过一段时间会恢复正常,但是这种现象的时间长短,跟停留在别的tab时间长短似乎成正比。
第三阶段,解决问题
最后发现原因,是因为jquery的本质是单线程[2],当停留在别的tab中,任务中将next_silde()函数积压过多所致。最后找到的解决方案[4]如下:
代码如下:
function next_slide() { var $active = $('#bitware-overlay img.active'); if ($active.length == 0) $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass('last-active'); $next.addClass('active'); $next.css({opacity: 0.0}); $next.animate({opacity: 1.0}, 1500,function(){ $active.removeClass(); setTimeout("next_slide()", 4000); }); } $(function() { setTimeout("next_slide()", 4000); });
相关推荐
ericxieforever 2020-09-03
earthhouge 2020-08-15
Andrewjdw 2020-07-26
pengkunstone 2020-07-19
风吹夏天 2020-07-18
amazingbo 2020-06-28
QCkiss 2020-06-04
FightFourEggs 2020-06-02
czsay 2020-06-01
troysps 2020-05-30
hanyujianke 2020-05-05
idning 2020-04-29
dbhllnr 2020-04-26
freedomfanye 2020-04-19
RocNg 2020-04-18
shawsun 2020-03-23
assastor 2020-03-20
AndroidAmelia 2020-03-01