最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JQueryslideshow的一个小问题(如何发现及解决过程)_jquery

来源:动视网 责编:小采 时间:2020-11-27 21:07:12
文档

JQueryslideshow的一个小问题(如何发现及解决过程)_jquery

JQueryslideshow的一个小问题(如何发现及解决过程)_jquery:第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下: 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if ($activ
推荐度:
导读JQueryslideshow的一个小问题(如何发现及解决过程)_jquery:第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下: 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if ($activ


第一阶段,试用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);
});

文档

JQueryslideshow的一个小问题(如何发现及解决过程)_jquery

JQueryslideshow的一个小问题(如何发现及解决过程)_jquery:第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下: 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if ($activ
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top