Question

我有一个关于用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类似的平滑滚动效果？

提前致谢，

的Jeroen

修改

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

我尝试了后台附件：修复，这不会导致IE中的口吃。然后我想，这个css可以与视差效果相结合。在IE的过渡中存在导致口吃的空白，所以也许我可以用背景附件桥接它们：固定。

这似乎有效！现在它甚至是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);
        }
});

Answer 1

让this image变得更小。它是2000×2386像素和8.3MB大。您可以将其设置为1000×1193像素并将其转换为JPEG。 JPEG比PNG更好地压缩照片。浏览器可以比大图像更快地处理小图像。

口吃背景图像IE

1 个答案: