Geek asks and answers

Selective <DIV> switching in browser view

I am writing an application HTML5for iOS. After going through this article, I thought about making some performance optimization by keeping some HTML nodes in DOM, but not saving them in viewport.

For demo purpose, I used the following code (my actual work scenario will have much more <div>)

<!DOCTYPE HTML>
<html>
<head>
<script>
    function func(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div1.style.cssFloat = "";
        div1.style.visibility = "hidden";
        div1.style.left = "-100%";

        div2.style.left = "100%";
        div2.style.visibility = "";
        div2.style.cssFloat = "left";
    }

    function func1(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div2.style.cssFloat = "";
        div2.style.visibility = "hidden";
        div2.style.left = "-100%";

        div1.style.left = "100%";
        div1.style.visibility = "";
        div1.style.cssFloat = "left";
    }
</script>
</head> 
<body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;">
   <div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;left:100%;display: inline;float:left;margin: 0px;padding: 0px">
   </div>
   <div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;left:-100%;visibility:hidden;display: inline;margin: 0px;padding: 0px;">
   </div>
</body>
</html>

, , <div> viewport <div>, div float:left left(css) float:left <div>, , <div>, viewport. , visibility:hidden . , DOM, visibility(css) hidden. ?

+5
2

css, u visiblity:hidden, , , . disply:none, , .

.

 <script type="text/javascript">
    function pageBodyLoad(){  // this function is called at the body load.. 
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "block";  // its shows div1
            div2.style.display = "none";   // its hide div2
    }
    function func(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "none";  // its hide div1
            div2.style.display = "block"; // its shows div2
        }

        function func1(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "block";  // its shows div1
            div2.style.display = "none";   // its hide div2
        }
    </script>
    <body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;" onload="pageBodyLoad()">`
        <div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;float:left;margin: 0px;padding: 0px">
        </div>
        <div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;margin: 0px;padding: 0px;">
        </div>
    </body>
+2

, : . , DOM, (css) ​​ .

, - , visibility:hidden, , . .

display:none , . , DOM ( ).

+1

More articles:


All Articles