Ленивый плагин загрузки для jQuery не совместим с HTML pushState ()? - PullRequest
Новая
       3

Ленивый плагин загрузки для jQuery не совместим с HTML pushState ()?

1 голос
/ 24 января 2012 
$(window).scroll(function() {

    hash = $('.layer:in-viewport').attr('id');

    if ( currentHash != hash ) { // fires it only one time when in-viewport

         if ( history && history.pushState ) { // if method is available
              window.history.pushState(hash, hash, url);
         }
    }

    currentHash = hash; 

});

$(".layer img").lazyload({
    effect: "fadeIn",
});

Я просто хотел отметить, что я пытаюсь использовать плагин Lazy Load для jQuery при вертикальной прокрутке страницы, чтобы лениво загрузить все мои изображения.Я использую новый метод HTML5 pushState(), чтобы изменить URL-адрес на конкретное имя контейнера (содержащего изображения), который в данный момент отображается в окне просмотра.

В любом случае, похоже, что плагин Lazy Load для jQuery не совместим с методом pushState(), потому что сейчас плагин у меня не работает.Он просто загружает первое изображение, но затем перестает делать свое дело.

Как только я удаляю строку window.history.pushState(hash, hash, url);, плагин работает нормально.Не выдается никаких ошибок, так что отладка и поиск решения для этого действительно сложно.

Есть идеи на этот счет?Что я мог сделать здесь?

edit:

Вот пример из реальной жизни, хотя jsBin не поддерживает метод pushState, поэтому ошибка не возникает на самой странице ...

http://jsbin.com/obaged/3/edit

А вот реальные примеры файлов, так что ошибка может быть проверена ... http://cl.ly/1b2K2W050V0k0d2V0z0e Просто раскомментируйте строку, которую я упомянул выше, чтобы увидеть, как она работает и не работает!

1 Ответ

3 голосов
/ 27 января 2012

Привет, Мэтт, похоже, твоя проблема - это относительный URL в вызове pushstate. Вот что я изменил:

Я добавил переменную в начало документа js для захвата исходного местоположения браузера: 

var initialHref = location.href;

Затем я внес соответствующее изменение в переменную " url " в вызове pushstate: 

if ( currentHash != hash ) {

    // ADDED: BUILD THE FULL URL AND APPEND HASH
    if(location.href == initialHref){
        url = location.href + sl + hash;
    }else{
        url = location.href.substr(0, location. href.lastIndexOf("/")) + sl + hash;
    }


    // If history API is available
    if ( history && history.pushState ) {

        if ( !historyBack ) {
            //console.log(url);
            window.history.pushState(hash, hash, url);
        }

    // Fallback to top.location.hash
    } else {

        $(window).off('hashchange', goToHash);

        top.location.hash = url;

        setTimeout( function() {
            $(window).on('hashchange', goToHash);
            }, 0);
    }

    currentHash = hash; 
}

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

Кажется, теперь работает нормально в Firefox и т. Д. Живая версия здесь для вас: http://vdotgood.com/stack/test.html

РЕДАКТИРОВАТЬ : как ни странно, в документах разработчика Firefox говорится, что это может быть относительный URL, но, похоже, это не работает ... странно.

...