滚动时导致滞后的大背景图像

时间:2012-09-16 02:46:19

标签: javascript jquery css image scroll

我正在构建的网站有4个大的背景图像,占用了用户浏览器的整个高度和宽度。它们被实现为CSS背景div。问题是,当在较大的屏幕尺寸上滚动时,它非常滞后且不连贯。当用户按下按钮时,这些图像之间的滚动是通过JavaScript自动完成的,所以这是我网站核心功能的一部分,我必须找到一种方法来防止延迟。

到目前为止,我已尝试通过JS预加载图像并将图像从PNG转换为JPEG(增加压缩并降低质量)服务器端。这些都没有奏效。

图像的最小高度可以是630像素。如何在各部分之间滚动时防止延迟?

这是我的代码:

CSS:

 body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }

 .area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }

 a { text-decoration: none; }
 h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }

 #top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
 #navigation { float: right; height: 100%; }
 #bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
 #sceneSelection { top: 20%; position: fixed; padding: 10px; }
 #info { margin-top: 50px; margin-bottom: 50px; }
 .box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }

 .nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block;  color: #fff; text-shadow: 0px 1px #000; }
 .nav:hover { color: #EA5555; }

 .nimage { float: left; width: 16px; height: 16px; position: relative; top: 5%; left: -20%; }
 .home { background: url(site_images/icons/nav/home.png); }
 .pricing { background: url(site_images/icons/nav/pricing.png); }
 .features { background: url(site_images/icons/nav/features.png); }
 .blog { background: url(site_images/icons/nav/blog.png); }
 .contact { background: url(site_images/icons/nav/contact.png); }
 .about { background: url(site_images/icons/nav/us.png); }

 .logo { font-size: 2em; text-shadow: 0px 1px #000; padding-top: 10px;  padding-left: 15px; color: #EA5555; font-family: Av, Helvetica, Arial, sans-serif; }
 .red { color: #EA5555; }
 .white { color: #fff; text-shadow: 0px 1px 0px #000; font-weight: bold; }
 .dark { color: #202020; }

 .center { text-align: center; }
 .left { text-align: left; }
 .right { text-align: right; }

 .larger { font-size: 1.25em; }


 .buttoni { -webkit-border-radius: 2px; -moz-border-radius: 0px; border-radius: 4px; background: #ddd; display: block; color: #ccc; font-size: 14pt; height: 50px; text-align: right; margin: 10px; cursor: pointer; color: #505050; }
 .buttoni:hover { background: #EA5555; color: #fff; }

 .btext { padding: 15px; position: relative; top: 25%; }

 .groundi { background: url(ground_button.png); }
 .skyi { background: url(sky_button.png); }
 .stratospherei { background: url(stratosphere_button.png); }
 .spacei { background: url(space_button.png); }

 .image { height: 50px; width: 50px; float: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

 li { color: #EA5555; }
 li span { color: #505050; }

HTML:

  <div class="space area" id="a4">

  </div>
  <div class="stratosphere area" id="a3">

  </div>
  <div class="sky area" id="a2">

  </div>
  <div class="ground area" id="a1">

  </div>

JavaScript的:

function scroll_to(id, speed, margin) {
         $('html, body').animate({
           scrollTop: $('#' + id).offset().top - margin
         }, speed);
       }

function match_height() {
         var heights = [11, 630, 693, 756, 819, 882, 945, 1008, 1071, 1134, 1197, 1260, 1323, 1386, 1449, 1512, 1575, 1638, 1701, 1764, 1827, 1890, 1953, 2016, 2079, 2142, 2205, 2268, 2331, 2394, 2457, 2520];

           var browsery = $(window).height();


           var i = 0;

           while(browsery > heights[i]) {
             i++;
           }

           var h = heights[i];

           $(".area").css("height", h + "px");
           $(".area").css("width", "100%");

           $(".ground").css("background", "url(scenes/ground/" + h + ".png)");

           $(".sky").css("background", "url(scenes/sky/" + h + ".png)");
           $(".stratosphere").css("background", "url(scenes/stratosphere/" + h + ".png)");

           $(".space").css("background", "url(scenes/space/" + h + ".png)");


       }

       match_height();

       var pos = 0;

       $(".buttoni").click(function() {
         var id = $(this).attr("id");

         if(pos != id) {
           scroll_to("a" + id, 2000, 0);
         }

         pos = id;
       });

6 个答案:

答案 0 :(得分:6)

根据我的理解,OP中起草的问题和解决方案有两个方面:

  • 最初,在match_height()函数中,OP作者检索最适合屏幕高度的图像,以便在完成动画后,用户可以看到一个完整的背景图像。
  • 在初始加载之后,用户可以借助触发scroll_to()函数及其包含的动画的一些按钮来上下移动这些部分(及其各自的背景图像)。这是实际问题所在的位置。

我的努力和由此产生的小提琴专注于scroll_to()函数和相关的动画。我采用了以下措施,这些措施结合起来(根据我的主观观察)'更顺畅'骂人经历:

  • 原始动画发生在'html''body'上,我只是将jQuery选择器缩减为一个选择器。为了能够使用jQuery 1.9(不推荐使用jQuery.browser),我正在使用特征检测来获得“正确”的选择器:

    function getScrollerSelector() {
        var $body = $("<body/>");
        $body.scrollTop(1);
        return $body.scrollTop() == 1 ? "body" : "html";
    }
    
  • 为了减少浏览器的处理负荷,我正在应用一个逻辑,根据CSS,在滚动过程中将不可见部分的背景图像设置为无:

    .scrolldown.scrollto-a2 #a1,
    .scrolldown.scrollto-a3 #a1, .scrolldown.scrollto-a3 #a2,
    .scrolldown.scrollfrom-a3 #a4,
    .scrolldown.scrollfrom-a2 #a4, .scrolldown.scrollfrom-a2 #a3,
    .scrollup.scrollto-a3 #a4,
    .scrollup.scrollto-a2 #a4, .scrollup.scrollto-a2 #a3,
    .scrollup.scrollfrom-a2 #a1,
    .scrollup.scrollfrom-a3 #a1, .scrollup.scrollfrom-a3 #a2
        { background: none; }
    
  • 我玩线性缓和,但这并不一定能改善任何事情

总而言之,滚动对我来说似乎不再起伏不定,但请注意这也取决于客户端计算机的处理能力。

这是scroll_to()函数:

function scroll_to(id, speed, margin) {
    var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var scrollTop = $('#' + id).offset().top - margin;
    var direction = scrollTop > currentScrollTop ? "down" : "up";
    $("body").addClass("scroll"+direction + " scrollto-"+id + " scrollfrom-"+getScrollFrom(direction));
    $( scrollerSelector ).animate({
             scrollTop: scrollTop
        }, {
             //easing: 'linear',
             duration: speed,
             complete: function() {
                 $("body").removeClass("scrollup scrolldown scrollto-a1 scrollto-a2 scrollto-a3 scrollto-a4 scrollfrom-a1 scrollfrom-a2 scrollfrom-a3 scrollfrom-a4");                     
             }
         }
     );
}

这是link to jsfiddle

答案 1 :(得分:4)

OP,

对于支持3D转换的浏览器,例如:-webkit-transform,您可以尝试以下操作:

your.div { -webkit-transform: translate3d(0,0,1px); }

可能看起来不多,但做上述操作会导致所讨论的div硬件加速。

如果您遇到任何闪烁的问题 - 在某些情况下会出现这些问题 - 以下情况应该让您解决:

your.div { 
    -webkit-transform: translate3d(0,0,1px); 
    -webkit-backface-visibility: hidden;
}

通过David Walsh - http://davidwalsh.name/translate3d

  

使用 translate3d 将CSS动画推送到硬件加速。即使您希望进行基本的2d翻译,也可以使用translate3d获得更多权力!如果切换到上面的转换后动画仍然闪烁,则可以使用一些鲜为人知的CSS属性来尝试解决问题

希望有所帮助。

答案 2 :(得分:1)

由于您是放大图像,您可以告诉浏览器如何处理图像的渲染。 在动画/滚动过程中,您可以告诉浏览器优化速度和完成动画/滚动,优化质量。

以下是您可以在img上使用的CSS属性:&#39;图像渲染&#39;值为optimizeSpeed / optimizeQuality。

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

答案 3 :(得分:0)

在本地测试似乎你的代码应该正常工作,我有firefox 15和chrome并且看不到任何滞后

如果您尝试滚动到方法怎么办?

function scroll_to(id, speed, margin) {
     $('html, body').animate({
       scrollTop: $('#' + id)
     }, speed);
   }

答案 4 :(得分:0)

你可以对图像做的一件事就是使用http://www.smushit.com/ysmush.it/来模糊它 这样可以减少图像的大小而不会降低质量,从而删除所有不需要的元数据。

答案 5 :(得分:0)

我遇到过与我正在处理的网站类似的问题。最后问题似乎是由于计算机/浏览器必须在屏幕上计算和渲染的图像的大尺寸。

我的建议是尝试减少需要在屏幕上显示和滚动的图像数量。

现在大多数现代浏览器都支持硬件(图形卡)渲染,而不是传统的(通常较慢的)基于软件的(CPU)渲染。基于硬件的渲染理论上应该减少您经历的滞后。但是,如果您的PC只具有基本或平均图形渲染功能,那么无论如何都不会取得太大成功。在我放弃并删除图像之前,我个人在Chrome,FireFox或IE中都没有成功。