Ng-lazyload-image: ParseError： 'import'および 'export'は、 'sourceType：module'でのみ表示される場合があります

やあ、

あなたのセットアップは何ですか？ Ionicをbabelまたはtypescriptで使用していますか？
typescriptを使用している場合、 tsconfig.jsonファイルを教えていただけますか？

現在、ノード5.4で[email protected]を使用しています。
私はtypescriptを使用し、tsconfig.jsonは

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

理由はわかりませんが、何らかの理由で、typescriptはコンパイルされた.jsファイルを取得する代わりに、ソースファイルを再コンパイルしようとします。
しかし、私の解決策は、npmのソースファイルを除外することでした。

したがって、次のコマンドで新しいプロジェクトを作成すると、次のようになります。

$ ionic start MyIonic2Project tutorial --v2 --ts

次に、 /app/pages/hello-ionic/hello-ionic.tsを次のように変更します。

import { Page } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  directives: [ LazyLoadImageDirective ]
})
export class HelloIonicPage {
    defaultImage: string;
    image: string;
    offset: number;

    constructor() {
        this.defaultImage = 'https://www.placecage.com/1000/500';
        this.image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
        this.offset = 100;
    }
}

および/app/pages/hello-ionic/hello-ionic.htmlから：

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>

<ion-content padding class="getting-started" #container>
  <p style="height: 1000px;">
      This starter project comes with simple tabs-based layout for apps
      that are going to primarily use a Tabbed UI.
    </p>
    <img
      [src]="defaultImage"
      [lazyLoad]="image"
      [offset]="offset"
      [scrollTarget]="container._scrollEle">
</ion-content>

[email protected]正常に動作するようになりました。

あなたはそれにスピンを与えることができますか？

また、別の方法で指示しない限り、ディレクティブはwindowスクロールイベントをリッスンします。 ionicアプリは、スクロールを処理する内部divであるため、これを行う必要があります。

NS

<ion-content #container>
  <img [scrollTarget]="container._scrollEle" ...>
</ion-content>

上記の私の例と＃2を参照してください

チャームのように機能します、あなたは素晴らしいです！
すべてをimg-lazyコンポーネントにパックし、画像のフェードインとオフラインキャッシュ機能のアニメーション化に少し取り組みます。

私の意見では、この問題は完全に閉じられています👍👍

それがうまくいくことをうれしく思います！

画像のフェードインのアニメーション化に少し取り組みます

ちょうどあなたが知っているので。 クラスng2-lazyloadingを追加すると、画像が読み込まれた後に自動的に削除され、クラスng2-lazyloadedが追加されます。

NS

// Before loaded
<img [lazyLoad]="image" class="ng2-lazyloading">

// After loaded
<img [lazyLoad]="image" class="ng2-lazyloaded">

ここで例を見ることができます： https ： https ：

問題が発生した場合はお知らせください。

そして多分いくつかのオフラインキャッシュ機能。

あなたが何かクールなものを作ったら私に知らせてください;）