Für ein Projekt von mir (siehe BigPictu.re oder bigpicture.js GitHub-Projekt ) muss ich mich möglicherweise mit einem sehr, sehr, sehr großen <div>Container befassen .
Ich wusste, dass bei dem einfachen Ansatz, den ich verwende, das Risiko einer schlechten Leistung besteht, aber ich hatte nicht erwartet, dass er hauptsächlich mit ... nur Chrome vorhanden ist!
Wenn Sie diese kleine Seite testen (siehe Code unten), lautet das Schwenken (Klicken + Ziehen) wie folgt:
- Normal / glatt bei Firefox
- Normal / glatt auch im Internet Explorer
- Sehr langsam (fast abstürzend) auf Chrome!
Natürlich könnte ich (in meinem Projekt) Code hinzufügen, um dies zu tun. Wenn Sie viel hineingezoomt haben, wird Text mit möglicherweise sehr großer Schriftgröße ausgeblendet. Aber warum gehen Firefox und Internet Explorer richtig damit um und nicht mit Chrome?
Gibt es in JavaScript, HTML oder CSS eine Möglichkeit, den Browser anzuweisen, nicht zu versuchen , die gesamte Seite (die hier 10000 Pixel breit ist) für jede Aktion zu rendern? (Nur das aktuelle Ansichtsfenster rendern!)
<!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>