2015-06-26 7 views
1

У меня есть страница php, которая вычисляет длительный процесс загрузки страницы. Я попытался реализовать «ожидающий div» с js - однако страница все еще ждет завершения вычисления php и не показывает загрузочный div при его вычислении. здесь заказать мои элементы кода:Реализация загрузки div на php-странице не работает

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="utf-8" /> 
     <title>My site</title> 
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

     <link rel="stylesheet" type="text/css" href="/css/style.css"> 
    <style> 
     #load_screen{ 
      background: #000; 
      height: 1600px; 
      width: 100%; 
     } 
     #loading{ 
      color: #fff; 
     } 
    </style> 

    </head> 
    <body> 
     <div id="load_screen"> 
      <div id="loading">calculating path</div> 
     </div> 
<?php 


//my php calculation and DB calls 
    ?> 
    <div id="container" class="container"> 
</div> 
<script> 
window.addEventListener("load", function() 
{ 
var load_screen = document.getElementById("load_screen"); 
document.body.removeChild(load_screen); 
}); 
</script> 

кто-нибудь знает, почему «загрузка» ДИВ теперь показывает и ждет страница PHP, чтобы полностью загрузить?

+0

Как отправить запрос от JS на PHP? (Где ваш Ajax?) –

+1

Я думаю, что PHP должен быть сначала выполнен сервером перед отправкой клиенту. Таким образом, сообщение загрузки HTML не поможет. Если ваш код занимает много времени, он застревает на сервере и удерживается там до его отправки клиенту –

ответ

0

Это немного не возможно в вашем случае. Но, когда вы используете jQuery, придерживайтесь jQuery. Заменить следующий сценарий:

<script> 
window.addEventListener("load", function() 
{ 
var load_screen = document.getElementById("load_screen"); 
document.body.removeChild(load_screen); 
}); 
</script> 

С:

$(document).ready(function() { 
    $("#load_screen").remove(); 
}); 

Приведенные выше два метода для загрузки страницы, а не для PHP Расчет для завершения. У вас должен быть триггер или звонок в завершении, а затем присоединить это событие с удалением экрана загрузки. Итак, скажем, если ваш PHP-расчет завершен и отправляет AJAX Response, с true, тогда вы можете удалить экран загрузки.

$.get("calculate.php", function (res) { 
    if (res == "ok") 
    $("#load_screen").remove(); 
}); 

Теперь я предполагаю, что файл PHP имеет нечто подобное. Источник calculate.php:

<?php 
    sleep(5); 
    die("ok"); 
?> 

При использовании обоих сценариев выше, PHP имеет задержку 5 секунд (в явном виде). Через 5 секунд экран загрузки будет удален!