Question

虽然下载百分比为100％，但我的进度条显示如屏幕截图所示。假设，如果我刷新页面它正常显示。如何实现这一目标？

任何人都可以帮我解决这个问题...

我的index.html：

<html>
<head>

<style>
       #progressBar {
        width: 400px;
        height: 22px;
        border: 1px solid #111;
        background-color: #292929;
    }
    #progressBar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #0099ff;
    }
</style>
</head>

<body>

<script type="text/javaScript">

</script>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap-progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8085/stylesheets/bootstrap.css" />
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">


    <div id="progressbar"><div></div></div>


<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);

           function progress(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
    }
    progress(JSON.parse(data).percent, $('#progressbar'));


  });
  socket.on('disconnect', function(){});
</script>
</body>
</html>

无法在jquery-ui进度条中更新Progressbarwidth

0 个答案: