How to Show a Spinner While Loading an Image via JavaScript

How to show a spinner while loading an image via JavaScript

I've used something like this to preload an image and then automatically call back to my javascript when the image is finished loading. You want to check complete before you setup the callback because the image may already be cached and it may not call your callback.

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if(objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}

Show spinner while new image is loaded

I have created a similar one and done it like this. May be it will help you as well

function load_bike(imgUrl){
 old_url=$('#bike_img').attr('src');
 $('#bike_img').load( function(){
 $('.loading').css("display","none");
 $('#bike_img').css("display","block");
 }).attr('src', imgUrl);
 $('.loading').css("display","block");
 $('#bike_img').css("display","none");  
 }

Display a Loading icon while images loads

Create a component that shows the placeholder image until the requested image is loaded, and hides the requested image. Once the image is loaded, you hide the placeholder and show the image.

@Component({
  selector: 'image-loader',
  template: `<img *ngIf="!loaded" src="url-to-your-placeholder"/>
    <img [hidden]="!loaded" (load)="loaded = true" [src]="src"/>`
})
export class ImageLoader {
  @Input() src;
}

See it working in Plunker.

Update

Now that I understand the requirements better, here's a solution with background image. It's a little hacky, and I like the original one better...

@Directive({
  selector: '[imageLoader]'
})
export class ImageLoader {
  @Input() imageLoader;

  constructor(private el:ElementRef) {
    this.el = el.nativeElement;
    this.el.style.backgroundImage = "url(http://smallenvelop.com/demo/image-loading/spinner.gif)";
  }

  ngOnInit() {
    let image = new Image();
    image.addEventListener('load', () => {
      this.el.style.backgroundImage = `url(${this.imageLoader})`;
    });
    image.src = this.imageLoader;
  }
}

Updated plunker.

Loadingspinner while Images is loading from URL

And again it shows how important it is to read the documentation properly beforehand and to look there first if you have any questions.

You can achieve the behavior I mentioned above with the following parameters.

loadingIndicatorSource link

Similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.

onLoad link

Invoked when load completes successfully.

onLoadEnd link

Invoked when load either succeeds or fails.

onLoadStart link

Invoked on load start.

Example: onLoadStart={() => this.setState({loading: true})}

Show spinner while loading image in Vue.js

The image will be emitting an event load which will be fired once the image is loaded.

new Vue({
  el: "#app",
  data: {
    imgsrc: "",
    btntext: "Show Image",
    isLoaded: false,
    isLoading: false
  },
  methods: {
    loaded() {
        this.isLoaded = true;
      this.isLoading = false;
    },
    toggleimg: function(){
        if (this.imgsrc == "") {
      this.isLoaded =  false;
      this.isLoading = true;
            this.imgsrc = "https://images2.alphacoders.com/103/1039991.jpg"
        this.btntext = "Hide Image"
      }else{
      this.imgsrc = ""
      this.btntext = "Show Image"
      }
    }
  }
})

.loading {
  background: transparent url('https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif') center no-repeat;
  height: 400px;
  width: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h2>Image Loader Spinner</h2>
  <button @click="toggleimg">{{ btntext }}</button>
  <div v-if="isLoading" class="loading"></div>
  <img v-show="isLoaded" :src="imgsrc" width="400" @load="loaded">
</div>

Show loading gif while image is loading

You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.

.loading {  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;}

<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" /><img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />

How can I display a loading icon while image change event is taking place. (without jQuery)

Well one easy way to do this while keeping jQuery out of the equation would be to position a div containing the loader icon above the image you want to swap, with a css display attribute of none.

<div> <img src="someloader.gif" id="ourLoaderGif" style="display: none;" /></div>

Now we can use a little vanilla JS and setTimeout to achomplish this transition from image to loader to image. The nbsp above will stop the div collapsing when the loader becomes hidden. Without it, when you toggle display of the loader, your layout will seem jumpy instead of being fluid.

function imageOnMouseEnter() {
  //How long to show the loader for in ms (eg enough time on average for your image to change)
  var imageLoadTime = 1000;

  //Show the loader
  document.getElementById('ourLoaderGif').style.display = '';

  //Change the original image src
  document.getElementById('pleasework').src = 'IMAGE-URL-HERE.png';

  //Set the timeout on the spinner
  setTimeout('hideLoader()', imageLoadTime);
}

function hideLoader() {
  document.getElementById('ourLoaderGif').style.display = 'none';
}

The only draw back to this solution is currently we are using a static variable for our time interval instead of the dynamic time from the actual image change, but at the very least this should point you in the right direction!

---

Related Topics