Прогресс .gif не отображается для .load

Question

Прогресс .gif не отображается для .load

0

Я пытаюсь написать некоторый код, так что, пока файл pts.php загружается в #content div на index.php (при загрузке страницы), будет отображаться gif загрузки, так как pts.php довольно большой и занимает несколько секунд. Я не хочу, чтобы люди открывали спам и обновлялись, пытаясь заставить его работать, а значит, и gif.

Проблема, с которой я сталкиваюсь, заключается в том, что gif вообще не отображается, насколько я могу судить. Есть ли способ проверить, показывает ли он, и если это не так, никто не знает, как это исправить? У меня есть div #loadingimagepage, скрытый с помощью CSS, и этот код находится на странице index.php с тегами скриптов:

$(document).ready(function(){
    $('#loadingimagepage').show();
    $("#content"). load ("pts.php");
    $('#loadingimagepage').hide();

Это значит: #content div:

<div id="content">
        <div id="loadingimagepage">
            <img src="images/ajax-loader.gif" />
        </div>
</div>

Любая помощь/советы будут оценены. Спасибо!

user2547576 16 дек. 2013, в 19:54

Источник

0

Вы должны добавить скрыть в обратном вызове load .
putvande 16 дек. 2013, в 18:41

Теги:

javascript

jquery

html

css

3 ответа

1

load является асинхронной, поэтому вам нужно дождаться ее завершения.

Вам нужно что-то вроде:

$(document).ready(function(){
    $('#loadingimagepage').show();
    $("#content").load("pts.php", function(){
        $('#loadingimagepage').hide();
    });
});

putvande 16 дек. 2013, в 16:47

1

Вы можете использовать функции ajaxStart и ajaxStop для отображения или скрытия загружаемого изображения.

Всякий раз, когда будет отправлен запрос Ajax, jQuery проверяет наличие других выдающихся запросов Ajax. Если ни один не выполняется, jQuery запускает событие ajaxStart. Любые и все обработчики, зарегистрированные в .ajaxStart(), выполняются в это время.

  $('#loadingimagepage').hide().ajaxStart(function() {
       $(this).show();  
  }).ajaxStop (function(){
     $(this).hide(); 
  });

Ссылка: http://api.jquery.com/ajaxStart/

Krish R 16 дек. 2013, в 16:33

Ещё вопросы

Вы должны добавить скрыть в обратном вызове load .

Mark · Accepted Answer · 2013-12-16T16-26-00.000Z

Ваш код будет обрабатываться, не дожидаясь завершения загрузки. Вам нужно поставить $('#loadingimagepage').hide(); при завершении функции загрузки.

бывший

$("#content").load("pts.php", function(){
    $('#loadingimagepage').hide();
});

Вы даже можете проверить, была ли ваша загрузка успешной, и уведомить пользователя, если это не так (при этом все еще скрывается загрузка gif)

$("#content").load("pts.php", function(passedSuccessVar){
    $('#loadingimagepage').hide();
    if(!passedSuccessVar) { alert("Error!Error! Danger Will Robinson");}
});

Что у вас сейчас есть:

$('#loadingimagepage').show();   //starts showing right away
$("#content"). load ("pts.php"); //starting loading content
$('#loadingimagepage').hide();   //hides the loading gif regardless of the previous function status

@ user2547576 Рад, что мог помочь, пожалуйста, отметьте как правильный, если это было решение.