У меня есть очень простой код, который действует как загрузочный gif для веб-страницы:
Контейнеры загрузки и содержимого находятся в моем базовом шаблоне.
//header
<a href="{{ url_for('welcome', id=id, profile=profile) }}" onclick="spinner();" class="home">Home</a>
//more html
<div id="loading">
<img src="/static/images/Loading.gif" class="ajax-loader">
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<script type="text/javascript">
function spinner() {
console.log('fire');
$("#loading").show();
$("#content").hide();
}
</script>
div#loading {
height: 350px;
position: relative;
display: none;
background: white;
}
.ajax-loader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
max-width: 100px;
margin: auto;
}
Мой код отлично работает в firefox и chrome, но не в сафари или на ios.
пс. Я проверил, что моя функция работает, консоль показывает "огонь", который я печатаю сразу после onclick().
Edit
Это единственная ошибка в консоли:
[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)
Обновление 1
Я добавил класс в мой <a href="url" class="..." и обновил свой javascript до следующего:
<script type="text/javascript">
$(function() {
$( ".spin_click" ).click(function( event ) {
event.preventDefault();
console.log('hiding content');
$(".content").hide();
console.log('show spinner');
$(".se-pre-con").show();
console.log('waiting now...');
});
});
</script>
#html
<div class="se-pre-con"></div>
<div class="content">
{% block content %}{% endblock %}
</div>
Я могу получить сафари, чтобы показать div se-pre-con, когда я нажимаю ссылку, однако полностью отключает ссылку href. Можно ли продолжить ссылку, выполнив команду .show() в jquery? Возможно, я неправильно понял preventDefault();, но я подумал, что он может действовать как обходной путь. Проблема все еще существует только в Safari
Обновление 2
Как было предложено @maximast, я решил использовать addClass и removeClass. Как обычно, он работает в chrome и firefox, но не в сафари. Код тот же, я только что добавил класс hide, который добавляется и удаляется по мере необходимости.
Если я использую сафари-инспектор и удаляю класс hide вручную, , счетчик будет отображаться. Когда я нажимаю на ссылку на странице, чтобы вызвать функцию jquery, я вижу, что класс hide удален правильно из div. Однако, даже если класс hide удален, счетчик не появляется. Возможно, я упускаю здесь что-то очевидное.
Вот библиотеки, которые я использую:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
Обновление 3
Вот ссылка на тестовую страницу. Существует ссылка, которая заставляет приложение спать в течение 3 секунд, предоставляя достаточно времени для запуска счетчика. Spinner сидит в логотипе. На тестовой странице будет показан счетчик, работающий в Chrome и Firefox, но не сафари. Реализация с помощью этой кнопки точно такая же, как и в других местах моего приложения.
http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test
Я изменил ссылку в логотипе на: <a href='#', который в первый раз отображает счетчик во всех трех браузерах. (прогресс!). Однако, когда вы нажимаете кнопку "Click to trigger spinner". link, происходит следующее:
- Chrome - spinner работает в первый раз.
- Firefox - spinner работает в первый раз, однако было несколько случаев, когда я должен был щелкнуть его второй раз.
- Safari - не повезло.
Вот флеш-код с управлением страницей тестовой страницы:
@app.route('/spinner-test', methods=['GET'])
def spinner():
return render_template('spinner-test.html')
@app.route('/wait', methods=['GET'])
def wait():
time.sleep(3)
return redirect(url_for('spinner'))