RactiveJS中新增图片时仅显示对应加载Spinner的解决方案

问题核心是全局的isImageLoaded变量被所有图片共享，导致修改状态时会影响所有图片。要实现每个图片的Spinner独立控制，得把加载状态绑定到每个图片自身的属性上，利用图片的唯一ID来区分。

具体修改步骤： #

• 给每个图片对象添加isLoaded属性，用来单独控制该图片的加载状态
• 模板中不再使用全局状态，而是引用当前图片项的isLoaded
• 图片加载完成的事件中，找到对应的图片项，更新它的isLoaded为true
• 修正addImage函数的错误，确保新增图片时初始状态为未加载

修正后的完整代码： #

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

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

ractive.on('imageLoaded', function(e) {
  // 获取当前图片的ID
  const imageId = parseInt(e.node.getAttribute('data-id'));
  // 找到对应的图片项并更新加载状态
  const images = ractive.get('images');
  const targetImage = images.find(img => img.id === imageId);
  if (targetImage) {
    ractive.set(`images.${images.indexOf(targetImage)}.isLoaded`, true);
  }
});

function addImage(image) {
  const allImages = ractive.get('images');
  // 新增图片初始isLoaded设为false
  allImages.push({ ...image, isLoaded: false });
  ractive.set('images', allImages);
}

关键说明： #

1. 图片状态独立：每个图片对象自带isLoaded，初始时已存在的图片设为true（因为已经加载完成），新增图片设为false，确保只有新增的图片显示Spinner。
2. 事件绑定图片ID：给<img>标签添加data-id="{{id}}"，在imageLoaded事件中通过这个ID找到对应的图片项，只更新该图片的状态，不会影响其他图片。
3. 修正函数错误：原来的addImage中allImages.push(images)是笔误，应该是push(image)，并且要给新增图片添加isLoaded: false。

这样修改后，每次新增图片时只有该图片会显示Spinner，加载完成后自动隐藏，不会影响已有的图片状态。

内容的提问来源于stack exchange，提问作者s.khan