HTML5 + jQuery + Бесконечная прокрутка - PullRequest
Новая
       0

HTML5 + jQuery + Бесконечная прокрутка

2 голосов
/ 01 декабря 2011

После долгих исследований я узнал, что binding событие scroll для $(window) в состоянии live не поддерживается. Это нормально, но у меня есть вопрос или два в отношении сценария, над которым я работаю.

У меня есть веб-сайт, использующий плагин jQuery History для HTML5 (http://tkyk.github.com/jquery-history-plugin/) для загрузки страниц для удобства пользователей, поскольку на моем сайте есть привязанный аудиоплеер.

На одной из моих страниц я создал бесконечный свиток для загрузки в Альбомы после прокрутки окна. Он работает нормально, если вы переходите на страницу напрямую, но если вы переходите туда по ссылке с поддержкой HTML5 (у меня есть несколько ссылок, специально предназначенных для реализации HTML5), она не работает.

Вот мой код бесконечной прокрутки: 

jQuery(function() {
                var getMoreMedias, loading, mediaType, nearBottomofPage, page, pendingCall, genreType, url, did_scroll;
              page = 1;
              loading = false;
                // did_scroll = false
              mediaType = $('.breadcrumbs strong').attr('rel');
                genreType = $('.breadcrumbs strong').data('genre-id')

              nearBottomofPage = function() {
                return $(window).scrollTop() > $(document).height() - $(window).height() - $('#footer').height();
              };

              getMoreMedias = function(page, mediaType) {
                    opts = {
                     lines: 12, //The number of lines to draw
                     length: 7, //The length of each line
                     width: 3, //The line thickness
                     radius: 10, //The radius of the inner circle
                     color: '#000', // #rgb or #rrggbb
                     speed: 1, //Rounds per second
                     trail: 60, // Afterglow percentage
                     shadow: true //Whether to render a shadow
                    };

                    var spinner = new Spinner(opts).spin()

                    $('#loadingMore').append(spinner.el)

                    url = '/top_medias/'
                    url += mediaType

                    if(genreType)
                        url += '/' + genreType

                    url += '?page=' + page

                $.ajax({
                        cache: false,
                  url: url,
                  type: 'get',
                  dataType: 'script',
                  success: function(data) {
                    $('#loadingMore').html('');
                            loading = false
                  },
                        error: function() {
                            $('#loadingMore').html('<p>No more results could be found</p>')
                            loading = false
                        }
                });
              };

            $(window).scroll(function(){
                    did_scroll = true
            })

            setInterval(function(){
                if(did_scroll) {
                    if (loading) return;
                if (nearBottomofPage()) {
                      loading = true;
                      page++;
                        getMoreMedias(page, mediaType)
                        did_scroll = false
                }
                }
            }, 250)
        });

Есть ли способ взять то, что у меня есть выше, и заставить его работать, если к странице обращаются через Ajax (что в сущности делает плагин HTML5)?

1 Ответ

2 голосов
/ 01 декабря 2011

Я не уверен, что это решает вашу проблему, но утверждение, что «оно работает при просмотре, но не при загрузке Ajax», подняло мне флажок - Javascript не выполняется на страницах, загруженных Ajax, скорее вы должны eval() оценить Javascript.

Что мне нужно сделать, когда мне нужна эта функция, так это добавить скрытый <div>, содержащий Javascript (без тега `', и выполнить его после загрузки, например (код psuedo) 

$.ajax(url, success: function() { eval($('#ajax').html(); });

<div id="ajax" style="display:none"> alert('here'); </div>
...