Aurelia - 事件加载/“延迟加载”图像

Question

我对 Aurelia 很陌生，但到目前为止我很享受。我想确保我以“Aurelia”的方式来做这件事——而且我没有错过任何东西，因为我的 new-platform-spidey-sense™ 告诉我我做错了什么。

现在我只是尝试将图像onLoad 的类更改为“动画、漂亮加载等”...（客户端）

到目前为止我的方法：

模板

<template>
  <div class="random" repeat.for="thumb of thumbs">
    <img 
        alt="thumb.name" 
        src.bind-one-time="${server}/${thumb.uri}"
        load.trigger="loaded(thumb)"
        class.bind="thumb.loaded"
        class="lazyload"
     />
  </div>
</template>

视图模型

import { HttpClient } from 'aurelia-fetch-client'
import environment from './environment'

export class App {

  constructor() {
    this.client = new HttpClient()
    this.thumbs = []
    this.loaded = t => { t.loaded = 'loaded' }
  }

  activate() {
    return this.client.fetch(`${environment.api}/api`)
      .then(response => response.json())
      .then(data => {
        this.data = data
        this.thumbs = data.map(item => {
          if (item.thumbnails)
            return item.thumnails
        )}
      )}
    }
  }

这是删节的代码——试图让内容清晰易读。 在这种情况下，我可以告诉我最近的event.trigger（与event.delegate 相对）是必要的，并且使用已经绑定的拇指数据可能是我最好的选择。

想法...？

Answer 1

你拥有的东西对我来说看起来不错。您可以尝试以下一些调整来简化代码：

https://gist.run?id=251638547841a34746d9cbd874da14e2

app.html

<template>
  <div repeat.for="thumb of thumbs">
    <img 
      alt.one-time="thumb.name" 
      src.one-time="server + '/' + thumb.uri"
      load.trigger="$event.target.classList.add('loaded') & oneTime"
      class="thumbnail"
     />
  </div>
</template>

app.js

export class App {
  server = 'https://i.imgur.com';
  thumbs = [
    { name: 'SpaceX', uri: 'xSraADG.jpg' },
    { name: 'SpaceX', uri: 'HSeX7Nn.jpg' },
  ];
}