Хорошая загрузка иконки 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>

Кстати, для preloaders я использую этот сайт: http://preloaders.net/ Я уверен, вам понравится! Это намного лучше, чем у вас. Так что в основном просто вызывайте changePreloader (), когда вы хотите его изменить, и хорошо для первой функции, которую вы уже знаете, как ее использовать:)