SORU
8 Aralık 2014, PAZARTESİ


Çok, çok, çok büyük bir div

Benim bir proje için (BigPicture.bi bigpicture.js GitHub project), çok, çok, çok büyük <div> çok potansiyel bir kap ile uğraşmak zorunda.

Ben kullanımı basit yaklaşım ile düşük performans riski olduğunu biliyordum, ama ... sadece çoğunlukla mevcut Krom olmasını beklemiyordum!

Eğer this small page (kod aşağıda) sınamak, panning (tıklayın ve sürükleyin):

  • Normal / Firefox sorunsuz
  • Normal, hatta Internet Explorer üzerinde pürüzsüz
  • Çok yavaş (neredeyse kırılma sesi) Krom!

Tabii ki, çok Yakınlaştırılmış olduğunuzda, potansiyel olarak çok çok büyük yazı tipi boyutu ile metin gizlenecek yapmak için bazı kod (projemde) ekleyebilirim. Ama yine deneden Firefox ve Internet Explorer düzgün bir şekilde işler ve Krom mu?

JavaScript bir şekilde, tarayıcı anlatmak için HTML ya da CSS vardenemek için değilişlemek için her eylem için tüm sayfayı 10000 piksel geniş olan)?(yalnızca geçerli görünüm penceresi render!)


<!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>

CEVAP
8 Aralık 2014, PAZARTESİ


position: fixed değişen şeyleri hızlandırmak gibi görünüyor.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ghosti66

    ghosti66

    27 AĞUSTOS 2006
  • LounaTutorials

    LounaTutoria

    10 EYLÜL 2009
  • SDSARG3

    SDSARG3

    14 Mart 2009