我有一个简单的应用程序，我可以显示图像，也可以添加更多。所以当我添加一个图像时，我会在加载时显示一个微调器，然后在加载完成后隐藏微调器。但问题是，当我添加第二个图像时，微调器不会显示。这是因为我使用的布尔值，我认为它是全局使用的。
请注意，我添加了一个图像通过图像的网址和渲染它的img html标记当然。我使用的是RactiveJS，我觉得有一些我可以做的唯一标识符，但只是不知道如何。所有的图像都有唯一的id附加到其数据。
下面是React代码：

let isImageLoaded = false;

const ractive = new Ractive({
  el: '#container',
  template: `
    {{#each images}}
      <div class="container">
        {{#if !isImageLoaded}}
           <span class="spinner"></span>
        {{/if}}

         <img 
            alt="" 
            src="{{url}}" 
            on-load="imageLoaded"
            style="display: {{isImageLoaded ? 'block' : 'none'}};"
         />
      </div>
    {{/each}}
  `,
  data: {
    images: [
      { id: 1, url: 'https://www.some-image.com/image1.jpg' },
    ],
    isImageLoaded : isImageLoaded
  }
});

ractive.on('imageLoaded', function(e) {
  ractive.set('isImageLoaded', true); 
});

function addImage(image) {
  const allImages = ractive.get('images');

  allImages.push(images);

  ractive.set('isImageLoaded', false); 
  ractive.set('images', allImages);
}

如果我在addImage函数中将isImageLoaded设置为false，那么添加一个新图像会使所有其他微调器显示出来。
如何使用id使每个图像和微调器唯一，并且仅在添加新图像时显示微调器？