schnitzer
17.03.2014, 00:40
Ajax и jQuery с индикатором загрузки, после загрузки контента
Всем привет!
Задача. На странице есть меню. По нажатию на элемент меню – сначала исчезает вся прочая информация с разными id. Потом появляется индикатор загрузки, и загружается контент в подготовленный блок из отдельного файла html. Новая информация отображается только после полной загрузки контента, находящегося в отдельном файле.
Для отображения контента, находящегося на странице, после его полной загрузки, посоветовали следующее:
<script type="text/javascript">
function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
$('#content').fadeIn (1000);
};
window.onload = init;
</script>
(#content {display:none;})
Но вопрос в подгружаемой информация из другого файла, так что это не подходит.
Сейчас код выглядит так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>тестирование</title>
<script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>
<style type="text/css">
p#menu_element {
text-decoration: underline;
cursor: pointer;
}
img#preloader {
display: none;
}
</style>
</head>
<body>
<p id="menu_element">Элемент меню</p>
<p id="el1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p id="el2">Nunc dictum, lacus ut malesuada pharetra, lacus tortor dapibus magna, eu porttitor nisl enim et magna.</p>
<p id="el3">Morbi congue odio ac lacus lobortis, sed tempor lorem porttitor. </p>
<img id="preloader" src="loading.gif" alt="preloader" />
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#menu_element').click(function () {
$('#el1, #el2, #el3').fadeOut(200);
$('#preloader').fadeIn(150);
$('#container').load('loadpage.html');
});
});
</script>
</body>
</html>
Код отдельного файла loadpage.html:
<div id="new_content">
<img src="picbig.png" alt="img" width="640" height="980" />
</div>
Я хочу добавить #new_content {display:none;}, и в скрипте после полной загрузки добавить #preloader fadeOut(240), а #new_content fadeIn(500), но не знаю как.
P. S. Полный чайник, если можно, напишите поподробней. И, хотелось бы, на jQuery, JS совсем не знаю, так что исходный код предпочтительно кардинально не менять.
Заранее спасибо!!
Всем привет!
Задача. На странице есть меню. По нажатию на элемент меню – сначала исчезает вся прочая информация с разными id. Потом появляется индикатор загрузки, и загружается контент в подготовленный блок из отдельного файла html. Новая информация отображается только после полной загрузки контента, находящегося в отдельном файле.
Для отображения контента, находящегося на странице, после его полной загрузки, посоветовали следующее:
<script type="text/javascript">
function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
$('#content').fadeIn (1000);
};
window.onload = init;
</script>
(#content {display:none;})
Но вопрос в подгружаемой информация из другого файла, так что это не подходит.
Сейчас код выглядит так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>тестирование</title>
<script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>
<style type="text/css">
p#menu_element {
text-decoration: underline;
cursor: pointer;
}
img#preloader {
display: none;
}
</style>
</head>
<body>
<p id="menu_element">Элемент меню</p>
<p id="el1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p id="el2">Nunc dictum, lacus ut malesuada pharetra, lacus tortor dapibus magna, eu porttitor nisl enim et magna.</p>
<p id="el3">Morbi congue odio ac lacus lobortis, sed tempor lorem porttitor. </p>
<img id="preloader" src="loading.gif" alt="preloader" />
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#menu_element').click(function () {
$('#el1, #el2, #el3').fadeOut(200);
$('#preloader').fadeIn(150);
$('#container').load('loadpage.html');
});
});
</script>
</body>
</html>
Код отдельного файла loadpage.html:
<div id="new_content">
<img src="picbig.png" alt="img" width="640" height="980" />
</div>
Я хочу добавить #new_content {display:none;}, и в скрипте после полной загрузки добавить #preloader fadeOut(240), а #new_content fadeIn(500), но не знаю как.
P. S. Полный чайник, если можно, напишите поподробней. И, хотелось бы, на jQuery, JS совсем не знаю, так что исходный код предпочтительно кардинально не менять.
Заранее спасибо!!