skrollr обрезает сайт и глючит на мобильной iOS

Я пытаюсь использовать библиотеку skrollr (https://github.com/Prinzhorn/skrollr), чтобы создать веб-сайт.
Он отлично работает в стандартных браузерах, но по какой-то причине обрывается и ведет себя странно до и после изменения ориентации на мобильных устройствах. У меня он инициализирован внизу, но ведет себя так, как будто это не так. Он обрезается примерно на 2/3 при загрузке, затем, если я вращаюсь вперед и назад, он будет идти до конца, а иногда даже добавляет слишком много места внизу, тогда моя анимация логотипа вверху исчезает. Я добавил несколько пустых команд данных в #skrollr-body, чтобы он знал, где конец, но все равно не повезло.

пожалуйста, помогите, пример здесь http://www.dalebailey.co.uk/idesignpixels/home.html


ios mobile jquery parallax skrollr
person lindstrom1989    schedule 10.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, Scrollr вычисляет высоту своего элемента содержимого и соответственно отображает его. Если у вас есть изображения в содержимом без объявленной высоты, потому что вы хотите, чтобы они были гибкими для браузера, он не будет знать высоту, пока все изображения не будут загружены. Мне удалось решить эту проблему, заставив ее ждать, пока все изображения не будут загружены следующим образом:

// Wait till all images are loaded before initiating the scrollr
var total_images = $("body img").length;
var images_loaded = 0;
$(document).ready(function(e) { 
        $("body").find('img').each(function() {
        var fakeSrc = $(this).attr('src');
        $("<img>").attr("src", fakeSrc).load(function() {
            images_loaded++;
            if (images_loaded >= total_images) {
                // now all images are loaded.
                var s = skrollr.init();             
            }
        }); 
    });
});
person Nick Dale    schedule 02.09.2015