Skip to content

A set of directives to postpone your angular application from rendering elements outside the viewport.

Notifications You must be signed in to change notification settings

onemanclapping/ng-lazy-render

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ng-lazy-render

A set of directives to help using lazy-rendering techniques easily.

lazy-module directive

Use this directive as an attribute if you want to delay the rendering of a module until visible in the viewport.

Attributes:

  • lazyModule: templateUrl of a placeholder to render while the module is not visible or while being rendered.

  • lazyIf: use an angular expression here to set a condition on whether you want this directive to take action or be ignored.

  • lazyHide: (optional) an angular expression to only hide the placeholder. With this parameter, this directive ignores the visibility of the module and only hides the placeholder when told to

Examples:

<any lazy-module="myModulePlaceholder.html" lazy-if="ctrl.acceleratePageLoad">
    <!-- lots of code -->
</any>
<any lazy-module="myModulePlaceholder.html" lazy-if="ctrl.acceleratePageLoad" lazy-hide="ctrl.hidePlaceholder">
    <!-- lots of code -->
</any>

lazy-repeater directive

Use this directive as an attribute if you want a repeater (ng-repeat) to grow as the user scrolls down.

Attributes:

  • lazyRepeater: number of initially shown items. This number is doubled every time the user sees the end of the list.

  • lazyTemplate: template (or templateUrl) to be shown at the end of the list.

  • lazyIf: use an angular expression here to set a condition on whether you want this directive to take action or be ignored.

Example:

<ul>
    <li ng-repeat="obj in data track by obj.index" 
        lazy-repeater="10"
        lazy-placeholder="templateUrl"
        lazy-if="ctrl.acceleratePageLoad">
          {{obj.data}}
    </li>
</ul>

Contribute

Please! PRs are much welcome.

About

A set of directives to postpone your angular application from rendering elements outside the viewport.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •