May 07, 2012

LinkedIn Creates HTML5 Infinite Scrolling Method, Shares it with the World

Last week, LinkedIn (NewsAlert) — the popular social networking site aimed at professionals which recently posted an excellent first quarter — debuted its standalone app for Apple’s (News Alert) iPad. The app featured, as most iPad-specific apps do, a clean interface meant to take advantage of the tablet’s screen size as well as a few other unique features, namely infinite scrolling.

While infinite scrolling is a feature that already existed, LinkedIn’s iPad app marks the first time such a feat has been accomplished entirely with HTML5. The engineering team who made the app wanted to enable a "stream" of content that can be generated endlessly, providing users with an “engaging content consumption experience.” However, mobile devices aren’t the powerhouses that modern desktops and laptops are, primarily in terms of memory, which an infinite scrolling list requires a lot of in order to work.

As such, the LinkedIn engineers sought out ways to circumvent this mobile memory issue while avoiding solutions that were readily available to them — Apple already has its own solution. The LinkedIn team liked the challenge of creating a way to enable infinite scrolling in HTML5, though, and so it did. In doing so, the team has helped other HTML5 developers because the people at LinkedIn were so kind as to make a blog post about the experience.

First off, the LinkedIn engineers replaced the “src” attribute of the image tags of large images with that of a small image when it was moved off screen. This allowed large images to be displayed on screen but also saved memory when those images were moved off screen.

This wasn’t enough, though, so next the team started hiding pages to further reduce memory use. To do this, the team set the CSS (NewsAlert) visibility property of pages to hidden. This resulted in more memory being freed up as the browser didn’t have to keep invisible pages loaded.

These two seemingly simple changes were apparently enough to fix 80 percent of crashes. For the other 20 percent, the team began to remove pages outright. Only pages that weren’t required were modified, replaced by an empty page of equal height and width called a "stub."

This all resulted in a stream that was able to keep the current page loaded with all images as well as the previous and next pages. Then, the second previous and next pages would be loaded up but without images. The next set of previous/next pages would be stubs and beyond that, pages were completely removed.

All instances of app crashing handled, some HTML/CSS optimizations were enough to ensure smooth performance, resulting in a creative and effective HTML5 infinite scrolling solution.

Edited by Carrie Schmelkin


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More