मेरी एक परियोजना के लिए (देखें BigPictu.re या bigpicture.js GitHub परियोजना ), मुझे संभावित रूप से बहुत, बहुत, बहुत बड़े <div>कंटेनर से निपटना होगा ।
मुझे पता था कि मेरे द्वारा उपयोग किए जाने वाले सरल दृष्टिकोण के साथ खराब प्रदर्शन का खतरा था, लेकिन मुझे उम्मीद नहीं थी कि यह ज्यादातर ... क्रोम केवल के साथ मौजूद होगा!
यदि आप इस छोटे पृष्ठ का परीक्षण करते हैं (नीचे कोड देखें), पैनिंग (क्लिक + ड्रैग) होगा:
- फ़ायरफ़ॉक्स पर सामान्य / चिकनी
- इंटरनेट एक्सप्लोरर पर भी सामान्य / चिकनी
- Chrome पर बहुत धीमा (लगभग दुर्घटनाग्रस्त)!
बेशक, मैं कुछ कोड (अपनी परियोजना में) यह करने के लिए जोड़ सकता हूं कि जब आप बहुत अधिक ज़ूम कर रहे हों, तो संभावित रूप से बहुत बड़े फ़ॉन्ट-आकार वाला पाठ छिपा हो। लेकिन फिर भी, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर इसे सही ढंग से क्यों संभालते हैं और क्रोम नहीं?
क्या प्रत्येक कार्य के लिए पूरे पृष्ठ को रेंडर करने का प्रयास करने के लिए जावास्क्रिप्ट (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>