Jan 30 2013

Coding an Infinitely Scrollable Site

When I redesigned my portfolio, I had 3 goals in mind:

Here are some techniques I’ve picked up along the way.

Load images as you scroll

When you have a lot of images on your site, you might not want to load everything at once since it can be bandwidth intensive and the order can be unwanted, i.e. the top images load last.In that scenario, you want to build a script that load only what you see and load more as you scroll. I found a neat script that did exactly that. http://jsfiddle.net/tcloninger/e5qaD/

I hacked it a little by adding a load condition on the image so that it only starts animating when the image is loaded. Alternatively, you can have a pre-loader, which is what most sites use, but the problem with that is that the site loads every single image before running it. Also, that wouldn’t work for infinite content, which is what I’m going for.

Here’s the short piece of code I added inside the scroll function:

$('img').load(function() {
    $(this).addClass('active');
});

Loading Spinner

But now the problem is that when the user reaches the content, as the images load nothing seems to show up, so we need some sort of loading animation to indicate that an image is loading. I found this script and tweaked it so that the loader appears at every article’s scroll point, then hide it when image loads. http://heartcode.robertpataki.com/canvasloader/

if($('#canvasloader-container').length == 0) {
    $(this).append(CANVASLOADER);
    loader();
}

Transitions

Transitions are a beautiful thing in CSS3. It takes minimal effort to pull delightful results. So I started adding .transition(1s) everywhere using LESS Elements http://lesselements.com for hover and normal states so that it has this simple, yet soothing effect even when the user mouse out. Simple codes. Works across browsers.

.button {
    background-color: blue;
    .transition(1s); 
}
.button:hover { 
    background-color: white;
    .transition(1s); 
}
0 tweets

5 Responses to “Coding an Infinitely Scrollable Site”

  1. Thanks for all the info! I really like your site, I think that you were able to achieve the 3 main goals you wanted. Great design :)

  2. @_Abizit_ says:

    Coding an Infinitely Scrollable Site by @MengTo: http://t.co/iolMXZkvyb

  3. drew says:

    Im a bit confused as to how the code snippet provided actually prevents images from loading initially… What (I think) you’re describing as lazyloading has become a bit more difficult with the jQuery lazyload plugin now requiring the actual src be set in an extra attribute.

    Am I missing something?

  4. Akash says:

    I think you have a great sense about design. There’s a lot to learn from you. I really like the idea of keeping the tweet icon that big, it encourages to tweet about the post. Super smart.

  5. Generally I don’t learn article on blogs, however I
    would like to say that this write-up very pressured me to take a look at and do
    it! Your writing style has been amazed me. Thanks, quite nice article.

Leave a Reply