6

私が構築している Web サイトには、ユーザーのブラウザーの高さと幅全体を占める 4 つの大きな背景画像があります。それらは CSS 背景 div として実装されます。問題は、より大きな画面サイズでスクロールすると、非常に遅くて途切れ途切れになることです。これらの画像間のスクロールは、ユーザーがボタンを押すと JavaScript を介して自動的に行われるため、これは私の Web サイトのコア機能の一部であり、遅延を防ぐ方法を見つける必要があります。

これまでのところ、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;
       });
4

6 に答える 6

8

OP,

For browsers that support 3d transforms, e.g.: -webkit-transform, you could try the following:

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

Might not look like much, but doing the above causes the div in question to be hardware-accelerated.

Should you run into any flickering issues—they've been known to turn up in some cases—the following should sort you out:

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

Via David Walsh - http://davidwalsh.name/translate3d

The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem

Hope that helps.

于 2013-03-14T02:08:38.203 に答える
6

私の理解によると、OPで起草された問題と解決策は2つあります。

  • 最初に、match_height() 関数内で、OP 作成者は画面の高さに最適な画像を取得します。これにより、アニメーションが完了すると、ユーザーには 1 つの完全な背景画像が表示されます。
  • 初期ロード後、ユーザーは、scroll_to() 関数とそれに含まれるアニメーションをトリガーするいくつかのボタンを使用して、(それぞれの背景画像を使用して) セクションを上下に移動できます。ここに、実際の問題が存在します。

私の努力とその結果のフィドルは、 scroll_to() 関数と関連するアニメーションに焦点を当てています。私は以下の手段を適用し、それらを組み合わせることで、（私の主観的な観察によると）「よりスムーズな」スコーリング体験が得られました。

  • 元のアニメーションは 'html'と'body' に対して発生しました。jQuery セレクターを 1 つのセレクターのみに減らしています。jQuery 1.9 (jQuery.browser は非推奨) を使用できるようにするために、機能検出を使用して「正しい」セレクターを取得しています。

    function getScrollerSelector() {
    var $body = $("<body/>");
    $body.scrollTop(1);
    return $body.scrollTop() == 1 ? "body" : "html";
}

  • ブラウザーの処理負荷を軽減するために、CSS に従って、スクロール中に非表示セクションの背景画像を none に設定するロジックを適用しています。

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

これはJSFiddleへのリンクです

于 2013-03-10T12:28:08.893 に答える
1

画像を拡大しているので、ブラウザに画像のレンダリングを処理する方法を伝えることができます。アニメーション/スクロール中にブラウザに速度を最適化し、アニメーション/スクロールの完了時に品質を最適化するように指示できます。

img で使用できる CSS プロパティは次のとおりです。

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

于 2013-03-11T09:10:40.710 に答える
0

ローカルでテストすると、コードは正常に動作するはずです。Firefox 15 と chrome を使用していますが、遅延は見られません。

scroll to メソッドでこれを試してみたらどうでしょうか。

function scroll_to(id, speed, margin) {
     $('html, body').animate({
       scrollTop: $('#' + id)
     }, speed);
   }
于 2012-09-16T04:27:03.337 に答える
0

画像に対してできることの 1 つは、 http: //www.smushit.com/ysmush.it/ を使用して画像をスマッシュすることです。 これにより、品質を損なうことなく画像のサイズが縮小され、不要なメタデータがすべて削除されます。

于 2012-09-16T04:31:09.290 に答える
0

私が取り組んでいたウェブサイトでも同様の問題がありました。最終的に、問題は、コンピューター/ブラウザーが計算して画面にレンダリングする必要がある画像のサイズが大きいためであると思われました。

可能であれば、画面に表示してスクロールする必要がある画像の量を減らしてみることをお勧めします。

最新のブラウザーのほとんどは、従来の (通常は遅い) ソフトウェア ベース (CPU) のレンダリングではなく、ハードウェア (グラフィック カード) のレンダリングをサポートするようになりました。ハードウェア ベースのレンダリングは、理論上、発生している遅延を軽減するはずです。ただし、PC のグラフィックス レンダリング機能が基本的または平均的なものしかない場合は、いずれにせよ、あまり成功することはありません。個人的には、屈服して画像を削除するまで、Chrome、FireFox、または IE のいずれでも成功しませんでした。

于 2013-03-13T08:17:53.107 に答える