无为清净楼资源网 Design By www.qnjia.com
第一阶段,试用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);
});
标签:
图片切换,slideshow
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月30日
2024年09月30日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】