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

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

赞 (0)

相关推荐

  • 基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

  • jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

  • imageVue的Slideshow模块使用技巧

    Slideshow模块可以用幻灯片的形式展示你的图片,该模块功能强大.本文将介绍如何利用Slideshow在选择某个分类之前用幻灯片的形式展示自己设定好的图片.语言描述可能不太直观,具体效果请看我的相册. 下面我介绍一下这种效果的实现方法,在开始之前请大家检查一下自己的imageVue相册目录中是否有slideshow.swf和slideshow.ini这两个文件,如果没有上述文件,请从这个http://www.mycodes.net/soft/6156.htm链接中下载一个imageVue相册

  • 实例代码详解jquery.slides.js

    Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件. Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项. 用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片.它附带充分的说明和示例. 废话不多说了,直接给大家贴代码了 $(function(){ $("#slides").slidesjs({ play: { active: true, // [boolean] Generate the

  • JQuery slideshow的一个小问题(如何发现及解决过程)

    第一阶段,试用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().leng

  • 一个小例子解释如何来阻止Jquery事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <!DOCTYPE html PUBLIC "-//W3C//D

  • 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一

  • 使用jQuery实现动态添加小广告

    使用jQuery实现动态添加小广告

    览网站的时候,有些网站总是在右下角,左上角或者其他地方投放广告. 我用jQuery试着自己做了一个,代码如下,如有不对的地方请各位不吝赐教 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

  • jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

  • 使用jquery+iframe做一个ajax上传效果(实例)

    html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>利用j

  • JQuery validate 验证一个单独的表单元素实例

    前提:已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) } 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • jquery实现删除一个元素后面的所有元素功能

    jquery实现删除一个元素后面的所有元素功能

    本文实例为大家分享了jquery实现删除一个元素后面的所有元素功能的详细实现过程,具体实现内容如下 实现效果: 选择项目 点击删除按钮,被选项之后的所有同级元素都被删除 jQuery 遍历的nextAll() 方法可以搜索 DOM 树中的元素跟随的同胞元素,也就是一个元素后面的所有同级元素,删除可以使用方法remove(),所以连起来为$(selector).nextAll().remove(); 下面给出实例演示:点击按钮后,删除被选项目之后的所有选项 创建Html元素 <div class=

  • JQuery手速测试小游戏实现思路详解

    (-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

  • jQuery 如何实现一个滑动按钮开关

    jQuery 如何实现一个滑动按钮开关

    滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty

随机推荐