Safari 7.0.1 и onsubmit

Из-за Safari (7.0.1/Mac OS) я борюсь с простой проблемой Javascript. Я отправляю форму, и я хочу отображать значок во время загрузки страницы.

Из того, что я вижу, это не связано с самим javascript, но больше с поведением onsubmit (если я перемещаю его за пределы функции, он выполняет ожидаемую работу при загрузке страницы, а не во время отправки).

Это мой код (отлично работает на Chrome и Firefox). Любая идея?

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php" onsubmit="loadLoader()">
    <input type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
function loadLoader(){
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}
</script>
</body>
</html>

Ответы

Ответ 1

Извините, я не могу комментировать ваш пост из-за моей репутации. Поскольку JS-код не блокируется, я попытался переместить его в голову и добавил javascript перед вызовом функции. Я тестировал его в Safari 7.0.1, и он работал.

<html>
<head>
    <script type="text/javascript">
        function loadLoader() {
            alert('loadLoader called');
            document.getElementById('loadingImage').style.display = 'block';
            return true;
        }
    </script>
</head>

<body>
    <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;" />
    <form method="POST" action="js.php" onsubmit="javascript:loadLoader()">
        <input type="submit" value="Go" />
    </form>
</body>
</html>

Ответ 2

Во-первых, расскажите о том, что происходит, когда вы отправляете форму. Браузер вызывает метод onsubmit и после начала подготовки запроса POST и отправляет его на сервер. После POST запроса браузер получит новую страницу html, браузер выгрузит старую страницу и загрузит новую.

Вы не увидите loadingImage, если весь процесс будет слишком быстрым. Но если сервер обрабатывает запрос POST медленно, вы увидите загрузку изображения на старой странице, прежде чем браузер отобразит новую страницу.

Вы можете попробовать добавить console.log и включить флаг консоли, чтобы предотвратить очистку журналов, и вы увидите 'show loader', но вы не увидите изображение, потому что браузер загружает новую страницу и обрабатывает ее.

function loadLoader(){
    console.log('show loader');
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}

Ответ 3

Вы можете вызвать атрибут функции onClick кнопки и идентификатора кнопки.

вариант 1: с атрибутом onClick

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input type="submit" value="Go" onclick="loadLoader()"/>   
  </form>

<script  type="text/javascript">
function loadLoader(){
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}
</script>
</body>
</html>

Вариант 2: Кнопка Событие Click по идентификатору

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input id="btnsubmit" type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
$("#btnsubmit").click(function() {
    document.getElementById('loadingImage').style.display = 'block';
    return true;
});
</script>
</body>
</html>

Вариант 3: методом отправки формы

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input id="btnsubmit" type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
$('form').submit(function() {
    document.getElementById('loadingImage').style.display = 'block';
    return true;
});
</script>
</body>
</html>