8

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**:**

picture outlay

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

Chris So
  • 711
  • 1
  • 11
  • 23
  • what is the mean of "only if it is on screen" ??? – NullPoiиteя Sep 23 '12 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 Sep 23 '12 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 Sep 23 '12 at 15:28
  • 2
    You might want to take a look at http://www.appelsiini.net/projects/lazyload - This is used for images but similar principles could be applied to other elements also. – Jamie Dixon Sep 23 '12 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 Sep 23 '12 at 15:36
  • possible duplicate of [Load (Lazy Loading) a Div whenever the DIV gets visible for the first time](http://stackoverflow.com/questions/8192651/load-lazy-loading-a-div-whenever-the-div-gets-visible-for-the-first-time) – Tom Irving Sep 23 '12 at 15:38

2 Answers2

3

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")
Jamie Dixon
  • 53,019
  • 19
  • 125
  • 162
1

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

Selvaraj M A
  • 3,096
  • 3
  • 30
  • 46
  • thanks for the answer, but would we need to need through all the divs which the top are greater than 100px? – Chris So Sep 23 '12 at 15:43
  • Have you found a solution that is actually effective? Only place I have seen unloading for possibly memory management purposes is Flickr. Sometimes you see the images turned to grey blocks and are loading again from cache if you scroll up fast. – Firsh - justifiedgrid.com Mar 20 '14 at 08:32
  • On a second note, they are using exactly what you described. We should learn from them :) – Firsh - justifiedgrid.com Mar 20 '14 at 08:42