日期:2014-05-16  浏览次数:20697 次

Github上一个模仿YouTube顶端进度条的jQuery实例,无法在本地部署,求教原因。
Demo地址:http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html
Github源码:https://github.com/peachananr/loading-bar

<html>
<head>
<script type="text/javascript" src="jquery.loadingbar.js"></script>
<link rel="stylesheet" type="text/css" href="loadingbar.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(function(){
  $("#ajax-call").loadingbar({
    done: function(data) {
      $.each( data.shots, function( i, item ) {
        $( "<img/>" ).attr( "src", item.image_teaser_url ).prependTo( $("#frame") );
        if ( i === 11 ) {
          return false;
        }
      });
    }
  });
    });
    </script>
<style>
.reload{
  font-size: 14px;
  font-family: "微软雅黑";
  font-weight: bold;
  }
  </style>
</head>
<body>
<a id="ajax-call" href="http://www.baidu.com" class="reload">ajax-call</a>
<div id="frame"></div>
</body>
</html>


是不是下面的这些参数调用错了?

$(".ajax-call").loadingbar({
replaceURL: false, /* You can visibly change the URL of the browser to reflect the clicked links by toggling this to true. Default is false. May not work in old browsers. */
target: "#loadingbar-frame", /* The container's selector where you want the ajax result to appear. Default is #loadingbar-frame */
direction: "right", /* The direction where the the loading bar will progress. Default is right. */

/* Default Ajax Parameters.  */
async: true, 
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: "html",
done: function(data) {}
});
ajax jQuery Github YouTube loadingbar

------解决方案--------------------
js加载的顺序调整下

<script type="text/javascript"&