如何在 html 和 javascript 中显示隐藏不确定的循环进度条

Question

你好，我不熟悉html和JavaScript。我使用它们是因为map v3仅在JavaScript中可用。如何设置一个不确定的圆形进度条，以便在我的地图加载时显示，函数初始化并在加载后将其关闭。

Answer 1

在此处制作 GIF 加载图像 - http://www.ajaxload.info/并下载它。然后将其上传到您的网络服务器。

然后只需在加载过程中显示它，并在完成后隐藏它。假设图像的 ID 为 加载IMG：

<img src='path/to/image.gif' id='loadingImg' />
//During Loading
$('#loadingImg').show();
//After done loading
$('#loadingImg').hide();
/////////////////// OR for fade in and out //////////////////
//During Loading
$('#loadingImg').fadeIn();
//After done Loading
$('#loadingImg').fadeOut();

或者由于您指示需要进度元素：

<progress id='progressbar' val='0' max='1000' ></progress>
<p id='loadingTxt' style='display: none;'>Loading Location...</p>
//When it is loading...
//Show the loading text
$('#loadingTxt').show();
//During loading, just have dummy progress
var timer = setInterval(function(){ 
     //Incriment Progress bar
     $('#progressbar').attr('value',parseInt($('#progressbar').attr('value'))+10);
}, 1000);
//When completed, set bar to full
//Stop timer,
clearInterval(timer);
//Set to full,
$('#progressbar').attr('value',1000);
//Hide the loading text
$('#loadingTxt').hide();

只需调整最大值即可满足其加载速度的需求。

Answer 2

在状态加载时使用 *.gif 图像，并在地图加载后将其删除。您不需要任何动画，只需在 gif 中创建它即可。或者使用图像并通过 css 或 js 旋转它。