Загрузка длинной страницы с несколькими фонами на основе значения вертикальной прокрутки в jQuery? - PullRequest
Новая
       24

Загрузка длинной страницы с несколькими фонами на основе значения вертикальной прокрутки в jQuery?

1 голос
/ 12 июля 2011

Дизайн, с которым мне доводилось работать, имеет ширину 960 пикселей и высоту около 7000 пикселей, разрезанную на пять вертикально сложенных сегментов в произвольных точках.Есть фиксированная боковая панель, которая прокручивается к каждому сегменту, в зависимости от того, какая ссылка навигации нажата.Поверх этого находится набор слайдеров, прозрачных PNG, заголовков и абзацев, преимущественно расположенных относительным образом.

В конечном итоге мне нужно сделать две вещи:

  1. Скрытьсоответствующие ссылки быстрой навигации на боковой панели до тех пор, пока не будет загружено фоновое изображение соответствующего сегмента

  2. Загружать (и в идеале постепенно увеличивать) прозрачные PNG в каждом разделе по мере необходимости - пользователь прокручивает между двумязначения вертикальной прокрутки и останавливаются на секунду, в результате чего прозрачные PNG этого раздела загружаются и исчезают.

В настоящее время я использую softscroll.js для достиженияэффект плавной прокрутки, когда щелкают ссылки на боковой панели (таким образом, прокручивается до связанных якорей).Таким образом, ленивые методы загрузки, которые начинают загружать изображения при прокрутке, не сработают - если я нажму последнюю ссылку на боковой панели навигации и она прокрутит меня вниз, я не хочу, чтобы каждое изображение находилось между нижним сегментом иверхняя загрузка в результате.

Хотя мне нужно выяснить пункт 1 раньше, чем позже, меня больше интересует второй вопрос.

Как использовать jQuery для загрузки изображений внутри определенного элемента тогда и только тогда, когда пользователь сделал паузу между двумя конкретными значениями вертикальной прокрутки?

Спасибо!

(Кстати, не ответьте с помощью lazyload jQuery-плагина appelsiini . Он не поддерживается разработчиком и не работает в современномбраузеры. Спасибо!)

Ответы [ 3 ]

2 голосов
/ 19 июля 2011

Чуть более полное решение, чем уже предложенное Джастином, заключается в использовании jQuery Waypoints для управления событиями в окне просмотра.

Вы можете столкнуться с проблемами, если переписываете механизм прокрутки в мобильных браузерах, используя что-то вроде iScroll или прокручиваемость. В этом случае вам нужно будет использовать их API для исследования исправления.

2 голосов
/ 16 июля 2011

Проверьте положение пользователя с помощью scrollTop () .Вы должны быть в состоянии сделать это в setInterval () обратном вызове. 

function loadBackground() {
    var userTop = $(window).scrollTop();
    var userBtm = userTop + $(window).height();
    var elemTop = $('#element').scrollTop();
    var elemBtm = elemTop + $('#element').height();

    if ((userBtm >= elemTop) && (userTop <= elemBtm))
    {
        // Load images
    }
}

$('document').ready(function(){
    setInterval(loadBackground,500);
}

(Это непроверенный код, но вы понимаете, что).

Редактировать: Скорректировать условное выражение так, чтобы, если какая-либо часть элемента была в окне, она запускалась.

1 голос
/ 17 июля 2011

Скрыть соответствующие ссылки быстрой навигации в боковой панели до тех пор, пока не загрузится фоновое изображение соответствующего сегмента

Не проверял его, но вы можете просто сделать это, вставивпара <img> s с тем же src как фон (с display: none; конечно) и тестирование свойства .complete каждого изображения в коротком цикле setInterval, пока они все не будут загружены.Не используйте onload, это имеет тенденцию быть ненадежным на изображениях.

Загружать (и в идеале постепенно увеличивать) прозрачные PNG в каждом разделе по мере необходимости - пользователь прокручивает между двумя значениями вертикальной прокрутки и останавливаетсяна секунду, заставляя прозрачные PNG этого раздела загружаться и постепенно исчезать.

Решение Джастина должно работать для обнаружения, когда вы находитесь в данном разделе.Просто установите флаг в значение false, прежде чем выполнять программную прокрутку, и установите значение true, как только он остановится, а затем пометьте раздел как активный, если флаг имеет значение true.

Я бы «отключил» изображения, указав их src атрибут для пустого gif 1x1, а для атрибута data-src - настоящий src.Затем просто сделайте что-то вроде: 

$('.selected-section img').each(function () {
    $(this).attr('src', $(this).data('src'));
});

Вы должны быть уверены, что установили размер «отключенных» изображений равным размеру, который они будут иметь после загрузки своего изображения, или же страницубудет много прыгать.

Вы могли бы использовать обработчик событий window.onscroll, чтобы определить, когда вы прокручиваете, но это, как правило, плохая идея.Для обсуждения этого см .: http://ejohn.org/blog/learning-from-twitter/

...