The image already in the document object model (DOM) will now display a spinner when a new image is introduced

Question

The image already in the document object model (DOM) will now display a spinner when a new image is introduced

I have created a basic app that displays images and allows users to add more. When adding an image, I show a spinner while it loads and hide the spinner once the loading is complete. However, I encountered a problem where the spinner does not appear when adding a second image. This issue seems to be caused by the boolean variable I am using, which appears to be used globally.

It's important to note that I add images using their URL and render them with the HTML img tag. My app utilizes RactiveJS, and I believe there might be a solution involving a unique identifier, although I'm unsure of how to implement it. Each image has a unique ID assigned to its data.

Below is the snippet of Ractive code:

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

If I set isImageLoaded to false in the addImage function, adding a new image causes all other spinners to appear.

I am seeking advice on how to use IDs to make each image and spinner unique, ensuring the spinner only appears when adding a new image. Any suggestions would be greatly appreciated!

javascript mustache ractivejs

Answer 1

Answer №1

To ensure that each image is tracked individually for loading status, one approach is to transform isImageLoaded into an object where image IDs serve as keys and boolean values indicate the loading status.

let imageLoadStatus = {};

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

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

ractive.on('imageLoaded', function(e) {
  ractive.set(`imageLoadStatus[${e.context.id}]`, true); 
});


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

  allImages.push(images);

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

Answer 2

To ensure that each image is tracked individually for loading status, one approach is to transform isImageLoaded into an object where image IDs serve as keys and boolean values indicate the loading status.

let imageLoadStatus = {};

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

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

ractive.on('imageLoaded', function(e) {
  ractive.set(`imageLoadStatus[${e.context.id}]`, true); 
});


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

  allImages.push(images);

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

Answer 3

Answer №2

Make sure to include the loaded: false property in each image object

Add a function called imageLoaded after the data section

Update the {{#if}} statement to:

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

Invoke it using

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

Use .loaded within the if statement since you are already iterating over each image

The imageLoaded function that comes after the data should look like this:

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

In the style section, add the following:

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

Keep in mind that loaded is a key within each images item

I also introduced a variable called lastImageID in the data where I store the highest id to easily increment for the next added image.

Furthermore, I implemented an addImage(num) function and everything runs smoothly!

Pro tip: Outside functions can be called with onclick, while Ractive.js functions can be triggered with on-click, as seen in a button example

.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 },
            ],
          },
          imageLoaded: function(i){
          //simulate that image takes some time to load with setTimeout
          setTimeout(() => { this.set('images['+i+'].loaded',true); }, 1000);
            
          }
        });
        
        
        function addImage(num) {
          for (var i = 1; i<=num; i++) {
                var gender = chance.bool() ? 'men' : 'women';
                ractive.push('images',
              {
                id: [...ractive.get('images')].pop().id+1,
                url: 'https://randomuser.me/api/portraits/med/' + gender + '/' + (chance.natural() % 100) + '.jpg',
                loaded: false
              }
            );
          }
        }
        
       
        </script>

Answer 4

Make sure to include the loaded: false property in each image object

Add a function called imageLoaded after the data section

Update the {{#if}} statement to:

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

Invoke it using

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

Use .loaded within the if statement since you are already iterating over each image

The imageLoaded function that comes after the data should look like this:

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

In the style section, add the following:

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

Keep in mind that loaded is a key within each images item

I also introduced a variable called lastImageID in the data where I store the highest id to easily increment for the next added image.

Furthermore, I implemented an addImage(num) function and everything runs smoothly!

Pro tip: Outside functions can be called with onclick, while Ractive.js functions can be triggered with on-click, as seen in a button example

.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 },
            ],
          },
          imageLoaded: function(i){
          //simulate that image takes some time to load with setTimeout
          setTimeout(() => { this.set('images['+i+'].loaded',true); }, 1000);
            
          }
        });
        
        
        function addImage(num) {
          for (var i = 1; i<=num; i++) {
                var gender = chance.bool() ? 'men' : 'women';
                ractive.push('images',
              {
                id: [...ractive.get('images')].pop().id+1,
                url: 'https://randomuser.me/api/portraits/med/' + gender + '/' + (chance.natural() % 100) + '.jpg',
                loaded: false
              }
            );
          }
        }
        
       
        </script>

The image already in the document object model (DOM) will now display a spinner when a new image is introduced

Answer №1

Answer №2

Similar questions

Prevent additional functions from running when clicking in Angular 5

Employing the unshift method on a two-dimensional array

How can I identify the moment when an AngularJS route controller is no longer in scope?

Launching shuttles using HTML and JavaScript

How can I detect click events in individual button-like areas on an image sprite using JQM?

Determining the exact moment a dynamic component finishes loading

Passing an array through ajax from PHP to JavaScript using a properly formatted JSON structure

Oops! Vue.js router configuration is throwing an error because it's unable to read properties of undefined when trying to access 'use'

ExpressJS exhibits unique behavior based on whether the API is requested with or without the specified PORT number

"jQuery's .each() method is only iterating through the last element in

What is the VueJS 3 alternative to the JS Select() function?

Instructions for rotating a Vector3 in Three.js along an axis

Deleting the HTML element

Steps for concealing a specific field in StrongLoop's outcome

Issues encountered when attempting to make a post login request in AngularJS

Eliminate the selection in a DropDownListFor when choosing a specific option in a separate dropdown

Leverage videojs-vr within a Vue.js component

I am working with Vue.js 2.0 and attempting to send an event from a `child component`

When attempting to browse for image files, Postman fails to display images

Refreshing React state