javascript - Lazy Loading: How to create a lazy loading html page using jquery - Stack Overflow

admin管理员组

文章数量:1416642

I wanted to have a page that load the content only when it reached that section by scrolling, just like what pinterest website was doing.

What is the design of implementing it or are there a plugin to do that? Please help.

I wanted to have a page that load the content only when it reached that section by scrolling, just like what pinterest website was doing.

What is the design of implementing it or are there a plugin to do that? Please help.

• javascript
• jquery
• html
• lazy-loading

Share Improve this question Follow asked Aug 28, 2012 at 0:37 LittleFunnyLittleFunny 8,4151616 gold badges9898 silver badges205205 bronze badges 3

• 1 I've heard it referred to as infinite scrolling. You might want to search for tutorials on that. – BillRobertson42 Commented Aug 28, 2012 at 0:43
• Oh yea you are right... infinite scrolling. – LittleFunny Commented Aug 28, 2012 at 0:59
• What have you tried? This has two pieces--Figuring out when the user has reached a point on the page and loading and appending the new data. Check out the waypoints plugin if you're having trouble with the first part. – Andrew Whitaker Commented Aug 28, 2012 at 1:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

$(window).on( "scroll" , function() {

     var $document = $(document);
     var $window = $(this);

     if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
         // do something
     }

 });

Where 400 is your offset from the bottom of the page. There are plugins that do this but this is some simple code to do it. I remend using underscorejs to throttle this function because this function will fire every time the scroll top changes. So for every pixel it will trigger. Generally I throttle it to only run every 60 frames per second.

There is a Lazy Load Plugin for jQuery if you want to try that:

http://www.appelsiini/projects/lazyload

本文标签： javascriptLazy Loading How to create a lazy loading html page using jqueryStack Overflow