javascript - Aurelia - 事件加载/"lazy load"图像

Question

我对 Aurelia 很陌生，但到目前为止我很喜欢它。我想确保我以“Aurelia”的方式进行此操作 - 我没有遗漏任何东西，因为我的 new-platform-spidey-senses™ 告诉我我做错了什么。

现在我只是尝试更改图像的类 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>

View 模型

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)在这种情况下是必要的，并且使用已经绑定(bind)的拇指数据可能是我最好的选择。

想法...？

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' },
  ];
}