Создание загрузочного изображения при загрузке ajax

Просто добавьте изображение в область отображения перед отправкой запроса. Результаты будут перезаписаны после завершения запроса.

 ... var ajaxDisplay = document.getElementById("main_result"); ajaxDisplay.innerHTML = "<img src='loading.gif' />" ajaxRequest.send(null); 

Вы можете подойти к этому несколькими способами, вы можете либо

1. Предварительно загрузите изображение и создайте элемент при отправке запроса и уничтожьте его после его завершения
2. Создайте его вместе с документом, а затем спрячьте его до отправки запроса, а затем спрячьте его снова, когда это будет сделано
3. Комбинация двух: Preload и create element в javascript, а оттуда просто скрыть / показать элемент при каждом запросе / завершении.

#1 Вероятнее всего, наиболее предпочтительным, когда запрос редко отправляется, поскольку он не мешает загрузке документа, а скорее загружается после того, как все остальное сделано. Поскольку создание / уничтожение элемента занимает больше времени обработки, чем просто скрытие / отображение элемента, это не рекомендуется.

#2 Предпочтительно, когда запрос отправляется часто, так как вы будете часто использовать изображение загрузчика, нет необходимости создавать / уничтожать его и просто иметь его с самого начала. Я рекомендую этот подход.

#3 Предпочтительно, когда вы хотите играть в нее безопасно. Это не загружает изображение, пока страница не будет загружена и потребует очень мало времени обработки.

Пример №1 | Код

HTML

 <div id='content'></div> 

Javascript

 var PreloadIt = new Image(441,291); PreloadIt.src="loader.gif"; var http = new XMLHttpRequest(); var url = "thepage.php"; var params = "whatever=you&want=in+here"; http.open("POST", url, true); http.onreadystatechange = function() { if(http.readyState == 4 && http.status == 200) { document.getElementById('content').removeChild(document.getElementById('ajaxloader')); document.getElementById('content').innerHTML = http.responseText } } function BeginLoading(){ var eLoader = document.createElement("img"); eLoader.src = "loader.gif"; eLoader.alt = ""; eLoader.id = "ajaxloader"; document.getElementById('content').appendChild(eLoader); http.send(params); } BeginLoading(); 

Пример №2 | Код

HTML

 <div id='content'> <div id='ajaxloader'><img src="loader.gif" style="display: none"/></div> </div> 

Javascript

 var http = new XMLHttpRequest(); var url = "thepage.php"; var params = "whatever=you&want=in+here"; http.open("POST", url, true); http.onreadystatechange = function() { if(http.readyState == 4 && http.status == 200) { document.getElementById('ajaxloader').style.display = "none"; document.getElementById('content').innerHTML = http.responseText } } function BeginLoading(){ document.getElementById('ajaxloader').style.display = "block"; http.send(params); } BeginLoading(); 

Пример №3 | Код

HTML

 <div id='content'></div> 

Javascript

 function CreateLoader(){ var img = document.createElement("img"); img.id = "ajaxloader"; img.src = "loader.gif"; img.alt = ""; document.getElementById("content").appendChild(img); img.show = function(){ img.style.display = "block"; } img.hide = function(){ img.style.display = "none"; } img.hide(); return img; } var eLoader = CreateLoader(); var http = new XMLHttpRequest(); var url = "thepage.php"; var params = "whatever=you&want=in+here"; http.open("POST", url, true); http.onreadystatechange = function() { if(http.readyState == 4 && http.status == 200) { eLoader.hide(); document.getElementById('content').innerHTML = http.responseText } } function BeginLoading(){ eLoader.show(); http.send(params); } BeginLoading(); 

Разное

Я бы рекомендовал отслеживать возвращаемый статус. Когда запрос не удался, ваш код вернет ошибку, так как вы не обрабатываете его. Убедитесь, что запрос был успешным и обрабатывал ваши ошибки.

Вы также должны рассмотреть возможность использования encodeURIComponent() , если у вас есть данные со специальными символами, такими как пробелы и т. Д.

 var category = document.getElementById('category').value; var brand = document.getElementById('brand').value; var item = document.getElementById('item').value; var url = "main_search_special.php" var parameters = "section=special&category=" + encodeURIComponent(category) + "&brand=" + encodeURIComponent(brand) + "&item=" + encodeURIComponent(item); ajaxRequest.open("GET", url+"?"+parameters, true); ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4 && http.status == 200){ var ajaxDisplay = document.getElementById('main_result'); ajaxDisplay.innerHTML = ajaxRequest.responseText; }else{ console.log("Request for \""+url+ "\" failed."); } } ajaxRequest.send(); 

Я бы рекомендовал включить действие возврата в его собственную функцию, чтобы заставить его выглядеть немного чище

Но все, что вам нужно сделать, чтобы добавить изображение, это:

Прежде чем выполнять свою отправку (в основном в любой функции), создайте элемент изображения и добавьте любой элемент в свой html, который вам нравится

Когда вы получите ответ от своего вызова ajax, удалите элемент изображения.

это то, что вы можете сделать, – установите изображение в своем любимом положении. Посмотрите на видимость на скрытое. Прежде чем сделать вызов php, сделать видимость видимой и снова после ответа из файла php вы можете сделать видимость вашего изображения скрытой. Это один из способов сделать это, есть и другие способы.

 search.onclick = function() { var ajaxRequest; document.getElementById("image_loading").style.visibility = "visible"; ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.getElementById("image_loading").style.visibility = "hidden"; var ajaxDisplay = document.getElementById('main_result'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } $("#main_result").empty().html('<img src="loading.gif" />'); var category = document.getElementById('category').value; var brand = document.getElementById('brand').value; var item = document.getElementById('item').value; var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item; ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true); ajaxRequest.send(null); }