Benim bir projem için ( BigPictu.re veya bigpicture.js GitHub projesine bakın ), potansiyel olarak çok, çok, çok büyük bir <div>konteynerle uğraşmam gerekiyor .
Kullandığım basit yaklaşımın düşük performans riski olduğunu biliyordum, ancak bunun çoğunlukla mevcut olmasını beklemiyordum ... Yalnızca Chrome!
Bu küçük sayfayı test ederseniz (aşağıdaki koda bakın), kaydırma (tıklayın + sürükle):
- Firefox'ta normal / pürüzsüz
- Internet Explorer'da bile normal / pürüzsüz
- Chrome'da çok yavaş (neredeyse kilitleniyor)!
Tabii ki, çok yakınlaştırdığınızda bunu yapmak için (projemde) bazı kodlar ekleyebilirim, potansiyel olarak çok büyük yazı tipi boyutuna sahip metinler gizlenir. Ama yine de, Firefox ve Internet Explorer neden Chrome'u değil de doğru şekilde işliyor?
JavaScript, HTML veya CSS'de, tarayıcıya her işlem için tüm sayfayı (burada 10000 piksel genişliğindedir) oluşturmaya çalışmamasını söylemenin bir yolu var mı ? (sadece mevcut görüntü alanını oluştur!)
<!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>