Здравствуйте, сегодня я расскажу Вам про постепенную загрузку страницы.
На многих сайтах страница отображается после того, как обработает весь html, php и javascript код. Но что делать, если на нашей странице обработка кода занимает долгое время?
Нам приходит на помощь ajax!
Создадим html файл.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '></script> <script type='text/javascript' src='my.js'></script> <title>Пример постепенной загрузки страницы</title> </head> <body> <p>Hello word ;)</p> <div id='content'>Тут появится наш контент</div> <div id='js'> content(); </div> </body> </html> |
В divе content появится наш контент.е js запускается javascript функция, которая, собственно, заставит контент появиться.
В div
Не забываем подключить библиотеку Jquery и my.js
Теперь в файле my.js создадим функцию content.
|
1 2 3 4 5 6 7 8 9 10 |
function content() { $.ajax({ type: "POST", url: "content_loader.php", success: function(html) { $('#content').empty(); $('#content').append(html); } }); } |
type - тип запроса.
url - скрипт, который будет обрабатывать и выводить результат php кода.
success - что делать при удачном завершении обработки.
В этом примере, при удачном завершении обработки content_loader.php, у нас будет очищаться div content и выводиться в него ответ от content_loader.php
Теперь перейдем к php файлу. В нём Вы можете написать абсолютно любой код, но в примере будет так 🙂
|
1 2 3 4 |
<?php sleep(2); echo "Новый контент!"; ?> |
Вот и всё, желаю Вам успехов!