How to display photos dynamically without using many DOM elements(ipad browser crashes with many DOM elements)?

Question

I am displaying photos as a grid(3 in each row).

I am having the database containg photo url in server1 and supposed to put the client scripts(html and js) in server2.

So I have to fetch the photo urls using ajax request(jsonp).

I was fetching the photo urls, creating divs dynamically using DOM and displaying the photos. If user hits "View more" button, then the next set of photos are displayed.

The problem was with ipad browsers. They crash when the number of photos displayed are more than 15 or 20. I googled this and found that ipad browser cannot handle many DOM elements.

So I have come up with an idea to have only 4 rows of photos. Then, when user hits "view more", I replace the 1st row with the fresh photos. But, when the user hits "View previous" or scrolls to the top of browser, I should show the first set of photos.

How can I implement this? Will javascript pools help me implement this? How do I use javascript pools? I am new to threads and pools.

Please help

Answer 1

css display property should work. hide all the elements by default (display: none), and each time it shows more, last page hides, new page shows. In this way you can avoid the crash because the none-displayed doms doesn't affect the browser rendering.