Display a loading icon while loading image

Question

I would like to be able to display a GIF while the image is being loaded. Is this possible with the script I am using?

From what I understand I would use something like

$('#image').load { loadingimage.hide }

Here is my code:

$.get('http://192.168.1.69:8090/VirtualRadar/AirportDataThumbnails.json?icao=' + p.Icao + '&reg=' + p.Reg , function(res) {
  var error = res.status;
  if (error == "404") {
    $("#image").attr('src', "placeholder.jpg");
     $("#image2").attr('src', "placeholder.jpg");
     $("#imageurl").attr('href', "//airport-data.com");
  } else {
    var imgUrl = res.data[0].image;
    var imgHref = res.data[0].link;
    $("#image").attr('src', imgUrl);
    $("#image2").attr('src', imgUrl);
    $("#imageurl").attr('href', imgHref);
  }
})

yes its possible, do you have a problem/error with your script? If so what is the problem? — Andrew L
– Andrew L, Commented Apr 2, 2018 at 20:33
in your html you can also just add the gif there <img id="image" src="myGif.gif"> and then change the src tag when your image is loaded — Andrew L
– Andrew L, Commented Apr 2, 2018 at 20:36

I wrestled a bear once. · Accepted Answer · 2018-04-02 20:49:33Z

Use the Image.onload attribute or attach an event listener.. load the loading wheel image first then display that while the larger image is loading...

function loadImage(src){
  return new Promise(done=>{
    var i = new Image();
    i.onload = ()=>done(i);
    i.src = src;
  });
}

const loadImgSrc = "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif";
const bigImgSrc = "https://www.gannett-cdn.com/-mm-/4252e7af1a3888197136b717f5f93523f21f8eb2/r=x1683&c=3200x1680/local/-/media/USATODAY/onpolitics/2012/10/03/bigbird-16_9.jpg";

loadImage(loadImgSrc).then(img=>{
  img.style.maxWidth = "100%";
  document.getElementById('myImg').appendChild(img);
  loadImage(bigImgSrc).then(img=>{
    img.style.maxWidth = "100%";
    document.getElementById('myImg').innerHTML = '';
    document.getElementById('myImg').appendChild(img);
  });
})

<div id=myImg></div>

Collectives™ on Stack Overflow

Display a loading icon while loading image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related