Angular 2+的延迟加载组件

Angular 2+的延迟加载组件
发布时间 2020年6月21日
插件作者 aaronlifton2

另一个Angular 2模块可以延迟加载应用程序中的模块。默认情况下,它使用IntersectionObserver而不是将事件侦听器附加到文档。(可选)您可以使用事件侦听器代替提前加载内容。带有lazy-load 用于延迟加载图像的  指令,但是您可以扩展该  on-scroll-to 指令以延迟加载任何内容!另外,要检测容器中的滚动,请将  scroll-root 属性设置为选择器。

安装:

# NPM
$ npm install angular-lazy-load --save

使用:

angular.module('myApp', ['angular-lazy-load'])
  .config(function(lazyLoadProvider) {
    lazyLoadProvider.setUseIntersectionObserver(true);
  })
  .controller('myController',
    ['$scope', function() {
        $scope.doSomething = function() {
          console.log("Doing something!");
        }
    }]
  );
<body ng-app="myApp">
  <div ng-controller="myController">
    <div style="height: 1000px;"></div>
    <div on-scroll-to="doSomething"></div>

    <div style="height: 1000px;"></div>
    <img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load/>
  </div>
</body>

默认选项

<div on-scroll-to="doSomething" scroll-threshold="0.1" scroll-throttle="20" scroll-unobserve="true" scroll-root="null" scroll-root-margin="0px" scroll-offset="0" use-io="true" scroll-observe="true"></div>

<img lazy-src="myImg" ng-lazy-load />