I am making a portfolio website and have a horizontal slider which will slide between each piece of work. Let’s assume that there are 100 works and they are all graphically intensive and/or flash objects.
Let’s also assume that there will be a maximum of 4 works on screen at any one time.
They are all in one large div which I manipulate with jQuery to modify the left property to move the div.
On a high end machine it works nice and smooth but on for example a netbook, it’s really choppy… or even on a slower browser.
What I plan on doing is working out which works will be visible as they transition and show only them. I hope this will give a performance increase. However, I plan on setting the visibility property to hidden so the elements dimensions are still there. But, I am wondering would it be better performance wise to set the display to none and create a placeholder element instead of just hiding the work?
What other ways could I increase performance on slower machines/browsers?
You will not gain any feelable performance increase from just making
display:none;. The content will still be loaded.Instead you could try to look at some ajax. An idea would be to preload 8 items even though you only show 4. Then at the users click on the “next”-button, the screen slides to the next 4 already loaded items and at the same time the next 4 items in the row will begin to load.
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/