Display a Loading Icon While Images Loads

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.

Display loading icon while images loads in angular

This answer maybe can help you, I thought loadstart have problems because It also can't work in my easy HTML javascript environment Codepen. I don't know MDN document how to use it.

https://stackoverflow.com/a/38837619/6735893

RN- How to show loader icon on screen until image is loaded?

while loading images from a URL we can make use of the props available for Image components. Props like onLoadStart can be used to set a state variable to show an ActivityIndicator while image loading is started and props like onLoad or onLoadEnd can be used to change the value of the state variable to hide the ActivityIndicator once the loading is done.

React: Show loading spinner while images load

The reason why onLoad was never called, is because you never had the images in the DOM, so instead of conditionally rendering, conditionally set the display property to none & block.

Below is a simple example of how you could wait for all images to load.

Safe to assume the image with the largest file size would most likely be the last to load

Most certainly not!!, the time it takes for an image to load is not always down to size, caching, or server load can effect these.

const {useState, useEffect, useRef} = React;

const urls = [
  "https://placeimg.com/100/100/1" ,
  "https://placeimg.com/100/100/2" ,
  "https://placeimg.com/100/100/3"
];

function Test() {
  const [loading, setLoading] = useState(true);
  const counter = useRef(0);
  const imageLoaded = () => {
    counter.current += 1;
    if (counter.current >= urls.length) {
      setLoading(false);
    }
  }
  return <React.Fragment>
    <div style={{display: loading ? "block" : "none"}}>
       Loading images,
    </div>
    <div style={{display: loading ? "none" : "block"}}>
      {urls.map(url => 
        <img 
          key={url}
          src={url}
          onLoad={imageLoaded}/>)}
    </div>
  </React.Fragment>;
}

ReactDOM.render(<React.Fragment>
  <Test/>
</React.Fragment>, document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>

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!

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" />

show loading icon until the page is load?

HTML

<body>
    <div id="load"></div>
    <div id="contents">
          jlkjjlkjlkjlkjlklk
    </div>
</body>

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
         document.getElementById('contents').style.visibility="visible";
      },1000);
  }
}

CSS

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

Note:

you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.

DEMO

http://jsfiddle.net/6AcAr/ - with timeout(only for demo)

http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)

update

http://jsfiddle.net/d9ngT/

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>

Display a Loading Icon While Images Loads