0

我有一个关于使用 jQuery 更改背景位置的问题。我正在处理的网站（http://www.jeroenrood.nl/GortzFruit）有一个滚动动画（滚轮或锚点单击），背景中 img-tag 的顶部位置变化比滚动慢速度。

这会在 Chrome 和 Firefox 中创建流畅的视差滚动效果，但在 Internet Explorer 中则不然。在 IE 中（无论哪个版本），这种效果会很卡顿（如上述链接所示）。

这是我使用的关于视差滚动效果 (HTML) 的代码：

<div style='height:1000px;background-color:#333;position:relative;' id='page1'>

    <img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' />   

</div>

这是 javascript/jQuery 代码：

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();

$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = -60 + ((scrollTop - page1)*0.8);
            $('#page1 .background').css('top',newOffset);
        }
});

不知何故，IE 似乎在处理图像的这个位置并应用它方面滞后。有没有人知道如何使 IE 具有与 Chrome 或 Firefox 类似的平滑滚动效果？

提前致谢，

杰伦

编辑：

好的，我正在寻找解决方案的路上！

我尝试了 background-attachment:fixed，这并没有导致 IE 卡顿。然后我想，好吧，这个css可以和视差效果结合起来。IE 中的过渡存在导致口吃的间隙，所以也许我可以用 background-attachment:fixed 来桥接它们。

这似乎有效！现在它甚至是 IE 中的流畅动画。即使有大量的背景图像。

这是代码（HTML）：

<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'>

    <div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div>   

</div>

这是相关的 javascript/jQuery 代码：

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();
$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px";
            $('#page1 .background').css('background-position',newOffset);
        }
});
4

1 回答 1

2

使这个图像小很多。它是 2000×2386 像素和 8.3MB 大。您可以将其设为 1000×1193 像素并将其转换为 JPEG。JPEG 比 PNG 更好地压缩照片。浏览器可以比大图像更快地处理小图像。

于 2013-01-08T16:12:31.000 回答