BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] とてもとてもとても大きなディブ

2022-10-30 09:59:17

質問

私のプロジェクトでは ( BigPictu.re または bigpicture.js GitHubプロジェクト ) の場合、私は潜在的にとてもとてもとても大きな <div> のコンテナを扱わなければなりません。

私が使っているシンプルなアプローチでは、パフォーマンスが低下するリスクがあることは知っていましたが、それがほとんどで存在するとは思いませんでした...。Chrome のみです!

もしあなたが この小さなページ (をテストする場合（以下のコードを参照）、パンニング（クリック＋ドラッグ）が行われます。

  • Firefox では通常 / スムーズ
  • Internet Explorer でも通常 / スムーズに動作
  • Chrome では非常に遅い (クラッシュ寸前)!

もちろん、私は (私のプロジェクトに) いくつかのコードを追加して、大幅にズームインしたときに、潜在的に非常に非常に大きなフォント サイズのテキストを隠すようにすることができました。しかし、それでも Firefox と Internet Explorer はそれを正しく処理し、Chrome は処理しないのはなぜですか?

JavaScript、HTML、または CSS で、ブラウザに を試さない を試さないようにする方法はありますか？ (現在のビューポートだけをレンダリングする！) 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            html, body {
                overflow: hidden;
                min-height: 100%; }

            #container {
                position: absolute;
                min-height: 100%;
                min-width: 100%; }

            .text {
                font-family: "Arial";
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
            <div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
        </div>

        <script>
            var container = document.getElementById('container'), dragging = false, previousmouse;
            container.x = 0; container.y = 0;

            window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }

            window.onmouseup = function() { dragging = false; }

            window.ondragstart = function(e) { e.preventDefault(); }

            window.onmousemove = function(e) {
                if (dragging) {
                    container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
                    container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
                    previousmouse = {x: e.pageX, y: e.pageY};
                }
            }
        </script>
    </body>
</html>

どのように解決するのですか？

への変更 position: fixed に変更することで、スピードアップするようです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します