很好的加载图标jquery

Question

所以我开始同时学习Javascript和jQuery，这似乎很容易。

现在我正在制作一个显示加载图像的函数(我在http://www.ajaxload.info/上制作了我的)，但我想要一些更酷的东西，比如每次更改的图像…

另外，有时我的加载图像出现在其他东西下，我不知道为什么，所以我试图解决这个问题，如果你有任何提示，请告诉我。

下面是我现在的文字:

...
<img id="loading" src="loading.gif" />
...
<script>
function load(){
 $("#loading").fadeToggle();
}
</script>

Answer 1

我已经在我的项目中这样做了，非常有趣的想法!我是这样做的。

当然你可以根据自己的意愿进行调整，我相信你可以做很多事情来让它更漂亮，但这里是你可以用最少的配置来做的。

CSS:

.preloader{
    z-index: 1001;  // This is what controls the layer position (the more it's high the more it becomes on top) I put 1001 because i don't use z-indexes more than 1000 but idk about you..
}

HTML:

<div class="preloader">
    <img src="images/preloaders/1.png" /> <!-- You can add restriction to the size of the preloader image, you can also apply styling to the div so that it covers the whole page (making a 'modal' effect) -->
</div>

Javascript (jQuery):

<script>
var MAX_PRELOADERS = 5; // How many different preloaders do you have ? (Make sure they are named appropriately : 1.png , 2.png ... 5.png (and in the right folder)
function showHidePreloader(){ // Basically just the same as yours
    $(".preloader img").fadeToggle();
}
function changePreloader(){
    var new_preloader = Math.round(Math.random() * MAX_PRELOADERS) + 1; // This will generate a number between 1 and MAX_PRELOADERS
    $(".preloader img").attr("src","images/preloaders/"+new_preloader+".png"); // Make sure to correct the path and extension if they're different
}
</script>

顺便说一句，对于预加载器，我使用这个网站:http://preloaders.net/我相信你会喜欢的!它比你现在的好得多。所以基本上只要在你想改变它的时候调用changePreloader()对于第一个函数你已经知道怎么用了:)