панель загрузки при загрузке нового контента - PullRequest
Новая
       3

панель загрузки при загрузке нового контента

1 голос
/ 17 марта 2012

Я проектирую свой веб-сайт, и я довольно новичок в javascript и т. Д. (На самом деле мой второй веб-сайт), так что держите меня в руках, пожалуйста.

У меня в основном есть div, который содержит серию дизайн-проектов. Когда пользователь прокручивает страницу до конца, JavaScript обнаруживает это и загружает новое содержимое страницы в этот div.

Вы можете увидеть сайт по адресу

http://www.jb -design.me / marchupdate /

Проблема в том, что новый контент просто останавливается, а затем загружается ниже. Без обратной связи с пользователем о том, что загружается новый контент и т. Д.

Я хотел бы, чтобы div отображался между текущим контентом и новым контентом (где div 'spacer' обычно находится на моем веб-сайте. И отображает загрузочный файл gif / png. После этого новый контент появится ниже, а затем исчезнет ...?

Возможно ли это вообще?

Я пытался реализовать 'var pageLoadisloaded', но безрезультатно.

Я буквально новичок, и последние пару дней я искал в Интернете решение, и теперь я подумал, что просто попрошу помощи!

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

Javascript код ниже ... 

alreadyloading = false;
nextpage = 2;

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
            $('#newcontent').children().last().after(data);
            alreadyloading = false;
            nextpage++;
        });
    }
}
});

Ответы [ 2 ]

0 голосов
/ 17 марта 2012

После того, как вы установили для уже загружаемой переменной значение true, добавьте немного html в конец div # newcontent, которое содержит изображение, указывающее, что загружается новый контент.Используйте $ (window) .ScrollTop (), чтобы прокрутить дальше вниз, чтобы убедиться, что это видно.Когда контент поступает через Ajax, вы можете удалить небольшой фрагмент кода, который вы добавили, и добавить новый материал.

В качестве альтернативы используйте 3 тега div следующим образом: 1) Уже загруженный контент сохраняется в первомразделение.2) Когда полоса прокрутки достигает дна, срабатывает ваша функция, которая вызывает эффект jQuery FadeIn для второго деления, содержащего загрузочное изображение.Прокрутите немного, используя вышеупомянутую функцию, чтобы убедиться, что она видна.3) Когда контент прибудет, поместите его в третий div и затем вызовите одновременный эффект FadeIn для этого и эффект FadeOut для второго подразделения.4) После завершения эффекта добавьте содержимое третьего раздела к первому и сбросьте третий.

0 голосов
/ 17 марта 2012

Что, если у вас есть фиксированный div в нижней части страницы, и когда вы были в условной загрузке новой страницы - вы добавляете ее, а когда загружается новый контент - вы ее исчезаетеout?

Дополнительная помощь

Вы можете попробовать что-то вроде этого, чтобы проверить, доступно ли больше страниц - настройте это для запуска после первого ajax - возможно, в части успехафункция: 

var url = "page"+nextpage+".html";
$.ajax({
    url: url,
    type:'HEAD',
    error:
        function(){
            // No more pages exist - remove loading
            $('#loading').remove();
        },
    success:
        function(){
            // Good to load another page

        }
});

Где я нашел это: http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06

...