CODEWITHSUNDEEP
javascriptjqueryhtmlajax
bryan
bryan

Reputation: 9369

Loading a partial part of a webpage

I have a very large webpage that loads a lot of box's with images inside of them. There could be anywhere from 3-100 box's on a page and each box has a height of 1000px.

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    ...
    ..
    .
</div>

I don't want the user to have to wait for 10-100 high res images and content to load inside the .box so I am trying to figure out the best way to only load what the user can see and keep loading as the user scrolls.

Could anyone point me in the right direction on the best way to accomplish this?

Upvotes: 3

Views: 3473

Answers (3)

Gabriel Ferraz
Gabriel Ferraz

Reputation: 632

As pointed out previously, infinite scrolling seems to be a good option to solve your problem. Here is a great website with some demos and some code you can look up. The first demo seems to be exactly like your site:

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

Good luck.

Upvotes: 1

Dan Johnson
Dan Johnson

Reputation: 1482

http://jscroll.com/

Infinite Scrolling seems to be your best option. Websites such as tumblr uses this to have large amounts of content in one page but without the massive loading time. Data is only loaded when the user scrolls down to the bottom of the page.

Upvotes: 1

DrogoNevets
DrogoNevets

Reputation: 1575

You could capture the scroll event and then figure out which elements are visible and load the image then

Upvotes: 0

Related Questions