加载图像时显示加载图标

Question

我希望能够在加载图像时显示 GIF。 这可能与我使用的脚本有关吗？

据我所知，我会使用类似的东西

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

这是我的代码：

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

Answer 1

使用 Image.onload 属性或附加事件侦听器...首先加载加载轮图像，然后在加载较大图像时显示该图像...

 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>