HTML内の画像リストを取得したい

Question

教えてください。
HTML内のimgリストを取得する方法がわかりません。

厳密にはng-template要素内にあるimgリストを取得して、それぞれ画像の読み込みを完了した後に
HTML画面へ出力するような動きにしたいのですが、それ以前にリスト取得が出来ずに困っています。

やったことは、div要素に変更したのちDocument オブジェクトの getElementsByName() メソッドを利用すれば
何の迷いもなくリスト取得する事が出来るんですが、その場合だとブラウザの読み込みが開始された直後に
画像のダウンロードまで同時に走ってしまいNGでした。(自動で画像イメージをダウンロードしない方法があれば良いのですが…)

単純にページが開く前に画像を読み込んで、全ての画像を読み込んだら画面表示したいだけです。
どなたかご教示ください。

■ サンプルコード
https://stackblitz.com/edit/angular-xgqbdx

<ng-template #imagelist>
  <img src="https://wallpaperaccess.com/full/11746.jpg" />
  <img src="https://wallpaperaccess.com/full/11747.jpg" />
  <img src="https://wallpaperaccess.com/full/11748.jpg" />
  <img src="https://wallpaperaccess.com/full/11749.jpg" />
  <img src="https://wallpaperaccess.com/full/11750.jpg" />
</ng-template>

import { Component, ViewChild, AfterViewInit } from "@angular/core";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  @ViewChild('imagelist', {static: false}) img;
  ngAfterViewInit() {
    console.log(this.img);
  }
}

Answer 1

丸々回答してしまうと、作業依頼となるうえに、かなり膨大になりますので、
方法の一つだけ回答いたします。

1. コンポーネントにて、テンプレート内HTMLを取得できるようにする。

// ElementRefを読み込む
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

export class AppComponent {
  @ViewChild('imagelist', {static: false}) img;
  
  // クラスのメンバとして、DOMを受け取れるようにしておく
  private elDom: HTMLElement;
  
  // constructorで、DOMを取得
  constructor(
    // ElementRefをクラス内で使用できるようにしておく
    private el: ElementRef
  ) {
    // this.elDomには、ng-tamplate自体（HTMLDOM）が格納される
    this.elDom = this.el.nativeElement;
  }

  ngAfterViewInit() {
    // DOMとして、JavaScript処理ができる
    this.elDom.querySelectorAll('img').forEach(e => {
      // 確か、Angular上では、NodeListに直接forEachが使えた、はず
      console.dir(e);
    });
  }
}

1. imgをsrcには、透明の1pxの画像など、表示されない画像にし、本ちゃんの画像パスは、data-srcなどの、javascriptで取得しやすい属性に入れる。

（srcに入っていると、HTMLに存在するだけで、読み込みが先に走ってしまうので）
3. 対象imgに共通クラスをつける。
4. ngAfterViewInit()の中にて、クラスを付けた対象imgを走査処理し、data-srcのパスを、srcに入れる。
先読みをさせたいなら、new Image()などを使って、先に画像を読み込み、成功したら、DOM上のsrcに入れるなどする

DOMさえとってこれれば、あとは、通常のJavaScript処理が可能になりますので、その後は、
画像読み込みのJS開発と同じ感覚で処理をすることができます。
しかし、これはあくまで方法の一つなので、
もっといい方法や、Angularの枠組み内で完結できる方法があるかもしれません。

Comments

[inukujira]

返信おそくなりました！
この回答で解決できそうです！ありがとうございました！