Javascript-在SetTimeout中加载图标

Javascript - Loading icon in SetTimeout

本文关键字：加载 图标 SetTimeout Javascript-      更新时间：2023-09-26

我有一个循环，它有一个设置的超时变量。我如何在它倒计时时制作一个加载图标，然后可能有一点代码来阻止它旋转（或只是显示）。我想jquery rotate可能会起作用，但我不喜欢插件。

http://fgnass.github.com/spin.js/如果你不介意使用一点JavaScript的话，似乎做得很好。另一种可能性是GIF，你只需手动显示和隐藏，你可以用类似的东西生成http://ajaxload.info/.

function imgload(){
setTimeout(function(){$('#response').html('<img src="imagse/load.gif">');  },2000);
}

the load image rotates for 2 seconds..

这可以在没有任何插件的情况下工作，但它假设您知道从开始显示加载图像到停止显示加载图像的过程需要多长时间。

var countdown = 5000;  // your countdown in milliseconds
setTimeout(function() {
    // hide your loading image after "countdown" milliseconds
    document.getElementById("loading-image").setAttribute("style","display:none");
}, countdown);
// show your loading image
document.getElementById("loading-image").setAttribute("style","display:block");

<img style="display:none" src="/loading.gif" id="loading-image" alt="Loading..." />

当然，如果您希望加载图像基于其他事件停止，您可以简单地使用在特定的回调方法中隐藏图像

document.getElementById("loading-image").setAttribute("style","display:none");

既然你有了这个答案，我鼓励你重新审视你对插件的立场。任何领域中最好的工程师都是在他们之前的平台之上建造的。当你站在巨人的肩膀上时，你可以很快完成很多事情。

相关文章：