I am developing mobile web app. However, safari in iOS 5.1 or below has limited memory. I need to minimize the memory usage when i use css3 transition. I found that if I use css style "display:none / visibility: hidden", The app will not crash by memory problem. So I want to make thing "hidden" when they are truly hidden. My English is bad. the picture can show what I want to:

uploaded image**:**

Another example which is a website used the css "visibility: hidden" property to hide every session when it is not on screen:

example website: Dentsu Network

I am developing mobile web app. However, safari in iOS 5.1 or below has limited memory. I need to minimize the memory usage when i use css3 transition. I found that if I use css style "display:none / visibility: hidden", The app will not crash by memory problem. So I want to make thing "hidden" when they are truly hidden. My English is bad. the picture can show what I want to:

uploaded image**:**

Another example which is a website used the css "visibility: hidden" property to hide every session when it is not on screen:

example website: Dentsu Network

• javascript
• jquery
• ios
• css
• web

• what is the mean of "only if it is on screen" ??? – NullPoiиteя Commented Sep 23, 2012 at 15:25
• Yep, I wanted to know that too... I didn't quite understand the question... maybe he wants to use media queries screen only rule? – rafaelbiten Commented Sep 23, 2012 at 15:27
• Most likely he wants to show the page bit by bit as the user scrolls. Similar to how they do it on Mashable. – Jamie Dixon Commented Sep 23, 2012 at 15:28
• 2 You might want to take a look at appelsiini/projects/lazyload - This is used for images but similar principles could be applied to other elements also. – Jamie Dixon Commented Sep 23, 2012 at 15:30
• I mean that I want to hide(visibility: hidden) divs when they can't be saw by user( out of the screen). I tried to loop all the div and test whether they are not in the screen or not for every touch event.However, it is not effective. – Chris So Commented Sep 23, 2012 at 15:36

2 Answers 2

There's a plugin for jQuery offering viewport selectors.

You can set everything to visibility:hidden; and then show only the items in the viewport. Once the user scrolls you can re-grab the viewport elements and show them too.

 $(":in-viewport").css("visibility", "visible")

You should be able to calculate the viewport from document.body.scrollTop and the size of the window.

Say if the scrollTop is 100px, the user the has scrolled down 100px. And now you may want to hide a div which occupies the top 100px of the screen and show a div which start at 101px and extend till the size(height) of the screen