添加新图像时，dom 中先前添加的图像开始显示微调器

Question

我有这个简单的应用程序，我可以在其中显示图像，也可以添加更多图像。因此，当我添加图像时，我会在加载时显示一个微调器，然后在加载完成时隐藏该微调器。但问题是当我添加第二张图像时，微调器没有显示。这是因为我正在使用布尔值，并且我认为它正在全球范围内使用。

请注意，我通过图像 url 添加图像，并使用 img html 标签渲染它。我正在使用 RactiveJS，我觉得我可以使用唯一标识符做一些事情，但只是不知道如何做。所有图像的数据都附加有唯一的 ID。

这是 Ractive 代码：

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);
}

如果我在

isImageLoaded

函数中将

addImage

设置为 false，则添加新图像会使所有其他微调器显示出来。

如何使用 ids 使每个图像和微调器都唯一并仅在添加新图像时才显示微调器？

Answer 1

您需要分别跟踪每个图像是否已加载。一种可能的方法是将

isImageLoaded

转换为对象，以图像 ID 作为键，以布尔值作为值。

let isImageLoaded = {};

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

         <img 
            alt="" 
            src="{{url}}" 
            on-load="imageLoaded"
            style="display: {{isImageLoaded[id] ? '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[${e.context.id}]`, true); 
});


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

  allImages.push(images);

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

Answer 2

在每个图像对象中添加一个

loaded: false

添加一个函数 imageLoaded AFTER data

将

{{#if}}

语句更改为：

{{#if !.loaded}}
   <span class="spinner"></span>
{{/if}}

用

on-load="@this.imageLoaded(@index)"

来调用它

如果你放入 .loaded 因为你已经迭代了每个图像

数据后的imageLoaded函数如下：

imageLoaded: function(i){
    this.set('images['+i+'].loaded',true);
  }

您放置的风格：

style="display: {{.loaded ? 'block' : 'none'}};"

再次加载是每个图像中的项目的键

我还在数据中添加了 var lastImageID，我在其中存储最高的 id，这样我就可以为下一个添加的图像添加 +1。

我还包含了 addImage(num) 实现，并且代码运行良好！

提示：您可以使用 onclick 调用外部函数，也可以使用 onclick 调用 ractivejs 函数，例如在按钮中

.spinner {
    background-color:black;
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/ractive'></script>



    <div id="target" ></div>
    <script id='template' type='text/ractive'>
    {{#each images}}
          <div >
            {{#if !.loaded}}
               <span class="spinner"></span>
            {{/if}}
             <img 
                alt="" 
                src="{{url}}" 
                on-load="@this.imageLoaded(@index)"
                style="display: {{.loaded ? 'block' : 'none'}};"
             />
          </div>
        {{/each}}
        <button onclick="addImage(1)">add 1 images</button>
        <button onclick="addImage(2)">add 2 images</button>
        <button onclick="addImage(5)">add 5 images</button>
        <button onclick="addImage(10)">add 10 images</button>
    </script>
    
    <script>
    const ractive = new Ractive({
      el: '#target',
      template: '#template',
      data: {
        images: [
          { id: 1, url: 'https://randomuser.me/api/portraits/med/women/52.jpg',loaded:false },
        ],
        lastImageID: 1,
      },
      imageLoaded: function(i){
        this.set('images['+i+'].loaded',true);
      }
    });
    
    
    function addImage(num) {
      for (var i = 1; i<=num; i++) {
        var lastImageIDtemp = ractive.get('lastImageID');
            var gender = chance.bool() ? 'men' : 'women';
        ractive.set('lastImageID',lastImageIDtemp+1);
            ractive.push('images',
          {
            id: lastImageIDtemp+1,
            url: 'https://source.unsplash.com/200x200/?image,random',
            loaded: false
          }
        );
      }
    }
   
    </script>