Menu
I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.
My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?
So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?
Thanks, Ted
486
What's the difference between Infinite Scroll and Lazy Loading? Infinite Scroll loads the entire resources of the next page as soon as the user nears the page end, thereby removing the need to click to reach the next page. Lazy Loading requests just the necessary resources only when they are demanded.
Open any post or page and click the “Ajax Load More” button. It's a red square with the letter “A” in the center. This will bring up the Shortcode Builder in a popup window. Once you're done making adjustments for the infinite scroll, click the “Insert Shortcode” button on the bottom left.
When we scroll through our feeds switching between content so quickly, the brain gets a hit of dopamine each time, creating a sort of neurological 'high. ' It's that rush that keeps you scrolling through the content. It's the same as any addiction, be it drugs, alcohol, or slot machines.
Pagination offers limited engagement to the user so that they can find a particular item immediately. On the other hand, lazy loading provides more interaction to the user, and they tend to spend more time on their first visit.
This is a pretty good plugin for jQuery that handles image lazy loading.
http://www.appelsiini.net/projects/lazyload
Images below the fold wont be loaded until they are scrolled into view.
It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.
For an example of this technique in use, check out http://mashable.com/
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
