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() {

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) {


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;
.button:hover { 
    background-color: white;
0 tweets

9 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.

  6. 空包网 says:

    网站弄得挺不错的,有空多多交流! 空包网 http://www.kongbao163.com

  7. フランスも誕生したたくさんの有名な時計ブランドを含む有名のトップブランドブレゲ、そして彼の姉妹ブランドL.LEROY、ハイエンドのPequignet赫柏林など、優秀なブランドは、新古典設計スタイル抜群。面白いのは、”と呼ばれる時計の父」ブレゲ時計師さんがそろそろ人生の3分の2のはフランス過ごした、彼はパリ学習タブ技術、そしてまたパリを発明した多くの時計技術及び技術、陀フライホイール、万年暦、ブレゲさんがパリ発明のさえ、ブレゲ時計ブランドはすべてフランス創立の。 パネライ時計コピー今日は私たちは瑞表で見た多くの技術やデザインはフランスから伝わってきたもので、パリ飾釘、玑粘紋、ブレゲ指針など、フランス手厚いタブ歴史ヨーロッパ時計業界全体に影響を与えている今。 http://www.bestevance.com/cartier/tank/

  8. 鋼のや金のバージョンがとても類似しているので、私は彼らが両方ともである性質のいくつかを議論するのを許します。第1のケースのサイズは、古典的なオメガスピードマスタームーンウォッチスタイルの場合には適度の39.7mmワイドである。オメガ・ブラウンのストラップで彼らとペアを選びましたが、この場合において、白のコントラスト縫い目による美しいマットアリゲーターストラップ。ちょうど下の40 mmのワイドで、この服装腕時計のようにたくさん着、フォーマルな服装と長いそでのために良いことだが、その古典的な観察を絶え間なくオメガスピードマスターがまだあります。 http://www.ooobag.com/wallet/louisvuitton/index_9.html

  9. スーパーコピーロレックス,品質保証も安心のロレックスコピー通販サイトHoshiwatch.CoM.ロレックススーパーコピー時計続々入荷中!!!当店は本物と区分けが付かないようなN品スーパーコピーロレックス腕時計等を扱っております. http://www.newkakaku.com/chz1.htm

Leave a Reply