skrollr 切断网站并在移动 iOS 上出现故障

Question

我正在尝试使用 skrollr 库 (https://github.com/Prinzhorn/skrollr) 创建网站。
它在标准浏览器上运行良好，但由于某种原因在移动设备上改变方向之前和之后会中断并表现出奇怪的行为。 我在底部初始化了它，但它的行为好像不是。 它切断了大约 2/3 的负载，然后如果我来回旋转它会一直走下去，有时甚至会在底部增加太多空间，然后我在顶部的徽标动画就会消失。 我在#skrollr-body 中添加了一些空白数据命令，所以它知道结束在哪里，但仍然没有运气。

请帮助这里的示例http://www.dalebailey.co.uk/idesignpixels/home.html

Answer 1

似乎 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();             
            }
        }); 
    });
});