JQuery slideshow的一个小问题(如何发现及解决过程)
更新时间:2013年02月06日 10:56:56 作者:
在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,在打开页面所以的正常测试都没问题:当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,针对这个问题,本文给予了详细的解决方法,感兴趣的朋友可以了解下
第一阶段,试用slideshow
在做一个网页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);
});
在做一个网页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);
});
相关文章
jQuery表单验证插件formValidator(改进版)
随着jQuery被越来越多的人使用,基于jQuery的表单验证插件,也从无到现在比较流行的已经有10个左右了2012-02-02jQuery Selectors(选择器)的使用(七、子元素篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!2009-12-12jQuery在ie6下无法设置select选中的解决方法详解
这篇文章主要介绍了jQuery在ie6下无法设置select选中的解决方法,结合实例分析了jQuery在ie6下无法设置select选中的原因与相关处理技巧,需要的朋友可以参考下2016-09-09
最新评论