Ajax и jQuery с индикатором загрузки, после загрузки контента

SCHNITZER · March 16, 2014

Всем привет!

Задача. На странице есть меню. По нажатию на элемент меню – сначала исчезает вся прочая информация с разными 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 совсем не знаю, так что исходный код предпочтительно кардинально не менять.

Заранее спасибо!!

Sensei · March 16, 2014


#new_content {

    display: none;

}


$('#container').load('loadpage.html', function() {

    $('#preloader').hide();

    $('#new_content').show();

});

SCHNITZER · March 17, 2014

Не получается.

<script type="text/javascript">        $('#menu_element').click(function () {            $('#el1, #el2, #el3').fadeOut(200);            $('#preloader').fadeIn(150);            $('#container').load('loadpage.html', function () {                $('#preloader').hide();                $('#new_content').show();            });        });    </script>

Все равно вижу процесс загрузки изображения (изображений).

Из описания load:

"Назначает функцию к событию load для каждого элемента набора.

Если связано с объектом window, то это событие вызывается только в том случае, когда агент пользователя завершит загрузку всего содержимого документа, включая фреймы, объекты, изображения и т.д. В случае привязки к элементу, эта функция вызывается когда целевой элемент и все его содержимое полностью загружено. Примечание: функция load будет работать только в том случае, если Вы настроили её перед тем, как элемент был полностью загружен, иначе, ничего не произойдет. Подобного не происходит в $(document).ready()."

Help, SOS, ...—...

Edited March 17, 2014 by SCHNITZER

Sign In

Ajax и jQuery с индикатором загрузки, после загрузки контента

Question

SCHNITZER

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

SCHNITZER

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information