Aurelia -事件加载/惰性加载图像

Aurelia - event load / "lazy load" images

本文关键字：加载 图像 事件 Aurelia      更新时间：2023-09-26

我对Aurelia很陌生，但到目前为止我很喜欢。我想确保我是在用"奥蕾莉亚"的方式做这件事——我不会因为我的新平台蜘蛛感应™告诉我我做错了什么而错过什么。

现在我只是想改变一个图像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)是必要的，使用已经绑定的拇指数据可能是我最好的选择。

思想……?

在我看来你的这些还不错。这里有一些你可以尝试的调整，可能会使代码更流畅一些:

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' },
  ];
}
相关文章：