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>

BTW，对于预加载器我使用此网站：http://preloaders.net/ 我相信你会喜欢它！它比你拥有的要好得多。所以基本上只需要在想要更改它时调用changePreloader（），以及第一个你知道如何使用它的函数：）

好加载图标jquery

1 个答案: