Lazyload

You may not want to load all of your user cards immediately for mobile devices and instead load it when the user requires the content. This technique is referred to as lazy loading and falls within the progressive enhancement school of responsive web design thought.

Lazyload only currently applies to Publisher's People panels.

Remark's lazyload delays loading of user cards in People panels and adds a Load more button to allow you to click and load more user cards.

How it works

<script>
$js(function() {  
  $js('body').remarkable({
    lazyload: true  
  });
});
</script>

Before you add lazyloading capabilities to your People panels, you should inventory what assets your pages load and determine what is required for the initial experience and what can be loaded once the user starts reading or interacting with the content.

Customizing number of cards to load

Lazyload uses the slice() method to return the next set of cards. By default, each time you click on the Load more button, lazyload will load the next twelve (12) cards.

$js(Element.ACTIVE_CARDS).last().nextAll().slice(0, 12).addClass(ClassName.ACTIVE);

If you want lazyload to load the next six (6) cards instead, simply change slice(0, 12) to slice(0, 6).