Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
26
rated 0 times [  27] [ 1]  / answers: 1 / hits: 124939  / 14 Years ago, fri, february 25, 2011, 12:00:00

I've noticed this in numerous modern websites (e.g. facebook and google image search) where the images below the fold load only when user scrolls down the page enough to bring them inside the visible viewport region (upon view source, the page shows X number of <img> tags but they are not fetched from the server straight away). What is this technique called, how does it work and in how many browsers does it work. And is there a jQuery plugin that can achieve this behavior with minimum coding.



Edit



Bonus: can someone explain if there is a onScrolledIntoView or similar event for HTML elements. If not, how do these plugins work?


More From » jquery

 Answers
7

Some of the answers here are for infinite page. What Salman is asking is lazy loading of images.



Plugin



Demo



EDIT: How do these plugins work?



This is a simplified explanation:




  1. Find window size and find the position of all images and their sizes

  2. If the image is not within the window size, replace it with a placeholder of same size

  3. When user scrolls down, and position of image < scroll + window height, the image is loaded


[#93580] Wednesday, February 23, 2011, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
loganl

Total Points: 424
Total Questions: 86
Total Answers: 112

Location: Zimbabwe
Member since Thu, Jul 21, 2022
2 Years ago
;