PHP: Как сделать постепенную загрузку контента для новичков

Часто происходит так, что Ваш посетитель ждет генерации страницы? У Вас много сложной логики? Сделаем предварительную загрузку и покажем что мы (т.е. сайт) работает, а нужно только немного подождать. Идея очень простая, реализация — тоже не сложная, но на ней легко понять как усложнить

Наша загрушка

Файл, который видит непосредственно посетитель, но у которого еще ничего нет кроме собственно подсветки что посетитель хотел

<?php
$menu = isset($_GET['menu']) ? (int) $_GET['menu'] : 0;
if ($menu > 2) $menu = 2;
?><!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
	<meta name="description" content="application/xhtml+xml"/>
	<meta charset="UTF-8"/>
	<title>Пожайлуста, дождитесь загрузки</title>
	<link href="/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/css/load.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Пример поздней загрузки контента</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a href="?menu=0" <?php if ($menu == 0) echo 'class="active"'; ?>>Menu 0</a></li>
				<li><a href="?menu=1" <?php if ($menu == 1) echo 'class="active"'; ?>>Menu 1</a></li>
				<li><a href="?menu=2" <?php if ($menu == 2) echo 'class="active"'; ?>>Menu 2</a></li>				
			</ul>
		</div><!--/.nav-collapse -->
	</div>
</nav>
<div id="load_later" class="container" rel="someurl.php?menu=<?php echo $menu;?>">
	<div class="page-header">
		<h1>Пожайлуста, дождитесь загрузки</h1>
	</div>
</div>
 
<footer class="footer">
	<div class="container">
		<p class="text-muted">Статичный контент</p>
	</div>
</footer>
<script src="/js/jquery.js"></script>
<script src="/js/inits.js"></script>
</body>
</html>

Данные будем получать по параметру от какого-нибудь сложного скрипта) Например считать факториал))))

$(document).ready(function() {
	var rel = $('#load_later').attr('rel');
	if (rel) {
		$.ajax({
			url: rel,
			success: function(data) {
				$('#load_later').html(data.html);
				document.title = data.title;
			},
			dataType: 'json'
		});
	}
});

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">