Я пытаюсь реализовать AJAX на своем веб-сайте. Когда кликается содержимое изменения div, он должен загрузить changepass.template.php. Для этого используется код im.
$(function() { $(".changepass").click(function() { $(".block1").load("views/changepass.template.php"); return false; }); Мой вопрос заключается в том, как показать GIF Animation (loading.gif), пока страница changepass.template.php полностью загружена. Дайте мне несколько советов по коду.
Существует много подходов к этому. Простой способ:
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
JS:
$(function() { $(".changepass").click(function() { $("#dvloader").show(); $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); return false; }); });
Отредактированный дисплей: блок для показа () после предложения от Джеймса Уайзмана 🙂
Например, чтобы сделать его немного более надежным, вы забудете добавить
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
в html, вы также можете сделать это в jQuery, что-то вроде:
var container = $.create('div', {'id':'dvloader'}); var image = $.create('img', {'src':'loading.gif'}); container.append($(image)); $("body").append($(container));
Который автоматически добавит div.
Просто запустите это на событии кнопки onclick.
Делает его немного менее открытым для ошибок.
Скорее это настройка стиля
.css("display", "block");
Просто используйте .hide() и. show() .
Они учитывают определения шаблонов стилей по умолчанию для элементов HTMl. Возможно, вам не нужно отображать «блок» для изображения. Для элемента может быть множество различных возможных стилей отображения:
вы можете вызвать некоторый метод, чтобы показать загрузку gif после вызова нагрузки и скрыть ее с помощью обратного вызова в функции загрузки:
$(function() { $(".changepass").click(function() { $("#gifImage").show(); $(".block1").load("views/changepass.template.php",null,function(){ $("#gifImage").hide(); }); return false; });