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

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Ajax и jQuery с индикатором загрузки, после загрузки контента (https://javascript.ru/forum/jquery/45804-ajax-i-jquery-s-indikatorom-zagruzki-posle-zagruzki-kontenta.html)

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

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

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

В функцию .load() вторым аргументом передай функцию, в которой скрвай прелоадер.

Не помогает

Код:

<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>

Все равно вижу процесс загрузки картинок

А.. Про картинки не дочитал в вопросе.
Ну тогда нужно сразу после вставки html кода обойти созданные картинки, повесить на каждую обоработчик события load. Некоторые из картинок могут быть закэшированными, они отобразятся сразу и у них уже не произойдет событие load. Об этом сигнализирует свойство .complete. Мимо таких проходим мимо. Когда все картинки загрузятся - отображаем див.
И кстати тут метод .load() для подгрузки html не пойдет. Используй $.ajax или $.get

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

Код:

<script type="text/javascript">

        $('#menu_element').click(function () {

            $.ajax({

                url: "loadpage.html",

                cache: false,

                success: function (html) { $("#container").html(html); }

            });

        });

    </script>

Тоже самое, не получается, чего только не перепробовал...:help:
Помогите!!

Цитата:

Сообщение от schnitzer

чего только не перепробовал

Читать ответы на свои вопросы пробовал? Цитирую:

Цитата:

Сообщение от danik.js

нужно сразу после вставки html кода обойти созданные картинки, повесить на каждую обоработчик события load. Некоторые из картинок могут быть закэшированными, они отобразятся сразу и у них уже не произойдет событие load. Об этом сигнализирует свойство .complete. Мимо таких проходим мимо. Когда все картинки загрузятся - отображаем див.

Цитата:

Сообщение от danik.js