Дисплей AJAX Loader на загрузке страницы

Question

привет Я довольно новичок в javascript и не знаю, как его использовать.

Я хочу, чтобы AJAX Loader появлялся, когда страница загружается и после завершения загрузки я хочу, чтобы загрузчик исчез. Может ли кто-нибудь отправить мне код для этого?

Answer 1

Обычно это делается путем отображения/скрытия div или двух над верхней частью вашего содержимого. Вы можете получить причудливый гид загрузки от http://www.ajaxload.info/, чтобы вы начали. Тогда вы хотите разместить DIV на странице:

<div id="loading"> 
    <p><img src="loading.gif" /> Please Wait</p> 
</div> 

Вы хотите, чтобы это по умолчанию скрыты, так что вам нужно добавить этот CSS:

#loading { display:none; } 

вы также хотите настроить дисплей для этого тоже:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; 
     background-image:url("transparentbg.png"); } 

файл transparentbg.png будет 25х25 черный PNG установить около 80% непрозрачный. Далее вам нужно будет способ показать и скрыть это с помощью JQuery:

function showLoading() { 
    $("#loading").show(); 
} 

function hideLoading() { 
    $("#loading").hide(); 
} 

Теперь вы можете использовать это, когда вам нужно сделать что-то вроде запрашивая внешнюю страницу для данных:

showLoading(); 
$.post("data.php", {var:"foo"}, function(results){ 
    $("content").append(results); 
    hideLoading(); 
}); 

Answer 2

Вы можете отобразить изображение, например. this, как только вы сделаете вызов Ajax, а затем спрячьте изображение, когда получите ответ от вызова ajax.

Answer 3

HTML:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

JavaScript:

$(function() { 
    $(".changepass").click(function() { 
     $("#dvloader").show(); 
     $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); 
     return false; 
    }); 
}); 

Answer 4

https://preloaders.net/en/ajax_loader_script здесь вы можете найти полное описание наряду с анимацией загрузчика в формате GIF, SVG и даже APNG