口吃背景图片IE [英] Stuttering background image IE

问题描述

我就改变与jQuery后台位置的问题。该网站我在（ http://www.jeroenrood.nl/GortzFruit ）的工作，有一个滚动动画（或滚轮或锚单击），和在img标签的背景中的顶部位置的变化比滚动速度要慢些。

这会在Chrome和Firefox能说一口流利的视差滚动效果，但无法在Internet Explorer。在IE浏览器（无论是哪个版本）这种效果口吃了很多（如可在上述环节中可以看出）。

这是code，我使用，关于视差滚动效果（HTML）：

 ＆LT; D​​IV的风格=高度：1000像素;背景颜色：＃333;位置：相对的; ID ='1页'＆GT;    ＆LT; IMG SRC =图像/ bg1.png'ALT =''风格=显示：内联;位置：绝对的;顶部：-60px;左：0像素，宽度：100％; z-index的：0;类=背景/＆GT;＆LT; / DIV＆GT;
 

这是JavaScript / jQuery的code：

  VAR第1页= $（'＃第1页）的偏移量（）顶部。;
变种WINDOWHEIGHT = $（窗口）.height（）;$（窗口）.scroll（函数（）{
        变种scrollTop的= $（窗口）.scrollTop（）;
        //如果第一页是在视
        如果（（第1页与所述; =（scrollTop的+ WINDOWHEIGHT））及及（（第1页+ 1000）＆GT = scrollTop的））{
            的newoffset = -60 +（（scrollTop的 - 第1页）* 0.8）;
            $（'＃第1页技术领域），CSS（'顶'，的newoffset）。
        }
}）;
 

不知怎的，IE浏览器似乎在处理图像的这一立场，并应用它落后。有谁有一个如何让IE也有类似的平滑滚动效果Chrome或Firefox的想法？

由于提前，

吉荣

---

编辑：

好吧，我对我的方式来寻找解决方案！

我试过背景附件：固定的，这并没有导致IE口吃。然后我想，好吧，这个CSS可以与视差效果的组合。还有，在IE浏览器，导致口吃的过渡差距，所以也许我可以用背景附件填补他们：固定

这似乎是工作！现在，即使是在IE中流畅的动画。即使有大量的背景图像。

这是code（HTML）：

 ＆LT; D​​IV的风格=高度：1000像素;背景颜色：＃333;位置：亲属;文本对齐：中心; ID ='1页'＆GT;    ＆LT; D​​IV CLASS =背景 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;背景附件：固定;＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

这是相应的JavaScript / jQuery的code：

  VAR第1页= $（'＃第1页）的偏移量（）顶部。;
变种WINDOWHEIGHT = $（窗口）.height（）;
$（窗口）.scroll（函数（）{
        变种scrollTop的= $（窗口）.scrollTop（）;
        //如果第一页是在视
        如果（（第1页与所述; =（scrollTop的+ WINDOWHEIGHT））及及（（第1页+ 1000）＆GT = scrollTop的））{
            的newoffset =左边的+（-60  - （（scrollTop的 - 第1页）* 0.2））+PX
            $（'＃第1页技术领域），CSS（背景位置'的newoffset）。
        }
}）;
 

解决方案

请这一形象小了很多。这是2000×2386像素，8.3MB大。你可以把1000×1193像素，将其转换为JPEG。 JPEG COM presses比PNG更好的照片。浏览器可以处理的小图像比大图像快了很多。

I have a problem concerning changing the background position with jQuery. The website I am working on (http://www.jeroenrood.nl/GortzFruit), has a scrolling animation (either scrollwheel or on anchor click), and the top position of the img-tag in the background changes slowlier than the scrolling speed.

This creates a fluent parallax scrolling effect in Chrome and Firefox, but not in Internet Explorer. In IE (regardless which version) this effect stutters a lot (as can be seen at the aforementioned link).

This is the code that I use, concerning the parallax scrolling effect (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>

And this is the javascript/jQuery code:

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);
        }
});

Somehow IE seems to lag in processing this position of the image and applying it. Does anyone have an idea of how to make IE have a similar smooth scrolling effect as Chrome or Firefox?

Thanks in advance,

Jeroen

---

Edit:

Okay, I am on my way to finding the solution!

I tried background-attachment:fixed, which did not result in stuttering in IE. Then I thought, well, this css could be combined with the parallax effect. There are gaps in the transition in IE that cause the stuttering, so maybe I can bridge them with background-attachment:fixed.

This seems to work! Now it even is a fluent animation in IE. Even with a massive background image.

This is the code (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>

And this is the relevant javascript/jQuery code:

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);
        }
});

解决方案

Make this image a lot smaller. It is 2000×2386 pixels and 8.3MB large. You could make it 1000×1193 pixels and convert it to JPEG. JPEG compresses photos better than PNG. Browsers can process small images a lot faster than large images.

这篇关于口吃背景图片IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！