2013-06-26 27 views
1

我有一个问题,第一次每次文件加载脚本似乎不会完全加载(清除缓存和cookie后)。再次刷新页面使脚本运行良好。每次我清除缓存时都会发生这种情况,所以基本上它不会在首次运行时加载。jquery第一次运行加载问题,刷新后工作正常

我不知道如何验证我的jquery是否不会产生不必要的问题。 http://jsfiddle.net/Lp6SX/1/

jQuery(document).ready(function ($) { 
$(window).load(function() { 

    var fitem = 0; 
    var litem = 0; 
    var mitem = 0; 

    function mycarousel_initCallback(carousel) { 
     jQuery('.productbox').bind('click', function() { 
      clearInterval(pt); 
      clearInterval(nt); 

      $('#mycarousel-prevpause').hide(); 
      $('#mycarousel-nextpause').hide(); 
      $('#next').show(); 
      $('#prev').show(); 

      var clickedId = jQuery(this).parent().attr('jcarouselindex'); 
      var totaldiff = 0; 
      console.log(clickedId + "==>" + mitem); 
      if (clickedId == mitem) { 
       var c_buy = jQuery(this).parent().attr('data-byitnow'); 
       //alert("as"+c_buy); 
       window.open(c_buy, '_blank'); 
       window.focus(); 
       //window.open =c_buy; 
      } 

      if (clickedId > mitem) { 
       totaldiff = clickedId - mitem; 
       //console.log('clickedId '+totaldiff); 
       if (totaldiff > 0) { 
        carousel.stopAuto(); 
        carousel.options.scroll = totaldiff; 

        carousel.next(); 

       } 
      } else { 
       totaldiff = mitem - clickedId; 

       if (totaldiff > 0) { 
        carousel.stopAuto(); 
        carousel.options.scroll = totaldiff; 

        carousel.prev(); 

       } 
      } 


      return false; 
     }); 

     jQuery('.jcarousel-scroll select').bind('change', function() { 
      carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); 
      return false; 
     }); 

     jQuery('#mycarousel-next').bind('click', function() { 
      $('#mycarousel-prevpause').hide(); 
      $('#mycarousel-nextpause').hide(); 
      $('#next').show(); 
      $('#prev').show(); 
      clearInterval(pt); 
      clearInterval(nt); 
      carousel.stopAuto(); 
      carousel.options.scroll = 5; 
      carousel.next(); 
      return false; 
     }); 

     jQuery('#mycarousel-prev').bind('click', function() { 
      $('#mycarousel-prevpause').hide(); 
      $('#mycarousel-nextpause').hide(); 
      $('#next').show(); 
      $('#prev').show(); 
      clearInterval(pt); 
      clearInterval(nt); 
      carousel.stopAuto(); 
      carousel.options.scroll = 5; 
      carousel.prev(); 
      return false; 
     }); 

     jQuery('#mycarousel-prevpause').bind('click', function() { 
      clearInterval(pt); 
      clearInterval(nt); 
      $('#prev').show(); 
      carousel.stopAuto(); 
      $(this).hide(); 
      $('#mycarousel-nextpause').hide(); 
      return false; 
     }); 

     jQuery('#mycarousel-nextpause').bind('click', function() { 
      clearInterval(pt); 
      clearInterval(nt); 
      $('#next').show(); 
      carousel.stopAuto(); 
      $(this).hide(); 
      $('#mycarousel-prevpause').hide(); 
      return false; 
     }); 

     jQuery('#prev').bind('click', function() { 
      $('#mycarousel-prevpause').show(); 
      $('#mycarousel-nextpause').hide(); 
      $('#next').show(); 
      carousel.stopAuto(); 
      continue_prev(carousel); 
      $(this).hide(); 
      return false; 
     }); 

     jQuery('#next').bind('click', function() { 
      $('#mycarousel-nextpause').show(); 
      $('#mycarousel-prevpause').hide(); 
      $('#prev').show(); 
      carousel.stopAuto(); 
      continue_next(carousel); 
      $(this).hide(); 
      return false; 
     }); 
    }; 
    var nt; 
    var pt; 

    function continue_next(carousel) { 
     clearInterval(pt); 
     nt = setInterval(function() { 
      carousel.options.scroll = 1; 
      carousel.prev(); 
     }, 2000); 
    } 

    function continue_prev(carousel) { 
     clearInterval(nt); 
     pt = setInterval(function() { 
      carousel.options.scroll = 1; 
      carousel.next(); 
     }, 2000); 
    } 

    function mycarousel_reloadCallback(carousel) { 
     //console.log('Carousel reloaded'+fitem+"==>"+litem); 
     makeCenterActive(); 
    }; 

    /** 
    * This is the callback function which receives notification 
    * when an item becomes the first one in the visible range. 
    */ 
    function mycarousel_itemFirstInCallback(carousel, item, idx, state) { 
     //console.log('Item #' + idx + ' is now the first item'); 
     fitem = idx; 
    }; 

    /** 
    * This is the callback function which receives notification 
    * when an item becomes the first one in the visible range. 
    */ 
    function mycarousel_itemLastInCallback(carousel, item, idx, state) { 
     //console.log('Item #' + idx + ' is now the last item'); 
     litem = idx; 
     makeCenterActive(carousel); 
    }; 

    function makeCenterActive(carousel) { 
     //console.log('Carousel reloaded'+fitem+"==>"+litem); 

     mitem = ((litem - fitem)/2) + fitem; 
     var middleItemId = $('.jcarousel-item-' + mitem + '').attr('id'); 
     //console.log('Middle Item'+mitem+"==>"+middleItemId); 


     $('.activeBox').each(function() { 
      //$(this).animate({height: "75px",width:"75px",marginTop:"0px"}, '200').removeClass('activeBox'); 
      $(this).removeClass('activeBox'); 
      //$(this).transition({ scale: 1 }); 
      $(this).transition({ 
       height: "109px", 
       width: "135px", 
       marginTop: "0px" 
      }); 
      $(this).children().children('img').transition({ 
       "max-width": "105px", 
       "max-height": "105px" 
      }); 
     }); 

     $('.jcarousel-item-' + mitem + '').each(function() { 
      //$(this).animate({height: "98px",width:"89px",marginTop:"-10px",marginLeft:"0px"}, '200').addClass('activeBox'); 
      //$(this).animate({width: "89px !important", height: "105px !important"}, 'slow'); 
      $(this).addClass('activeBox'); 
      //$(this).transition({ scale: 1.3 }); 
      $(this).transition({ 
       height: "140px", 
       width: "140px", 
       marginTop: "-17px", 
       marginLeft: "0px" 
      }); 
      $(this).children().children('img').transition({ 
       "max-width": "105px", 
       "max-height": "105px" 
      }); 

     }); 


     var c_time = $('#' + middleItemId + '').attr('data-timeremain'); 
     var c_buy = $('#' + middleItemId + '').attr('data-byitnow'); 
     var c_price = $('#' + middleItemId + '').attr('data-price'); 
     $('#timeremain').html('Current' + c_time); 
     $('#byitnow').html('<a href="' + c_buy + '">Price :</a>'); 
     $('#price').html(c_price); 
     //carousel.reload(); 
    } 

    // Ride the carousel... 
    jQuery(document).ready(function() { 
     jQuery("#mycarousel").jcarousel({ 
      scroll: 1, 
      auto: 1, 
      wrap: 'circular', 
      initCallback: mycarousel_initCallback, 
      reloadCallback: mycarousel_reloadCallback, 
      itemFirstInCallback: mycarousel_itemFirstInCallback, 
      itemLastInCallback: mycarousel_itemLastInCallback, 
      // This tells jCarousel NOT to autobuild prev/next buttons 
      buttonNextHTML: null, 
      buttonPrevHTML: null 
     }); 
    }); 

}) 
}); 

它是用于修改转盘滑块。任何人都可以检查代码,看看你是否发现任何问题?

谢谢你的时间。

回答

4

你有这样的代码结构:

$(window).load(function(){ 

    // code part 1 here .. 

    jQuery(document).ready(function(){ 

     // code part 2 here .. 

    }); 
}); 

window.load()部分内。我认为这没有意义,你只需要一个。您可以将所有内容都包含在文档就绪回调中,如下所示:

jQuery(document).ready(function(){ 
    // code part 1 here .. 
    // code part 2 here .. 
}); 

希望对您有所帮助!

+0

初始式启动。 – PlantTheIdea

+0

谢谢你......我正在根据你们的建议进行一些更改。 –

+0

好吧,所以我尝试了,但没有解决问题。请检查我对用户matty的评论的回复。 –

0

首先你错过了一些右括号。你也把$(window).load()放在jQuery(document).ready()中,所以它不会被运行,然后另一个jQuery(document).ready()在这两个里面,所以它不会被运行。 你应该只使用1语句是这样的:

jQuery(document).ready(function() { 
    ... 
}); 

,把里面的东西它(增值经销商,函数声明和jQuery $(..)操作)。

我认为你应该决定统一命名约定,并且只使用jQuery或$美元符号,而不是同时使用两者。

+0

我在哪里错过了右括号?找不到它。你是如何发现如此之快的? –

+0

打开和关闭括号的数量不匹配,但是您在源代码中编辑了某些内容。现在这些数字是相同的,但我的文本编辑器不会突出显示第1行和第2行中的匹配括号。 – mkutyba

+0

未编辑任何内容。无论如何,我做了改变,但问题仍然是一样的。我检查了Firefox和铬,我得到这个错误http://oi40.tinypic.com/5bzfhj.jpg(第二个错误)。但它在第一次运行后就消失了?这里是铬http://oi41.tinypic.com/2qdvshs.jpg(第二个错误)。 –

相关问题