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属性或附加事件监听器..首先加载加载轮图像，然后在加载较大图像时显示...

＆＃13;

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

＆＃13;

<div id=myImg></div>

＆＃13;

加载图像时显示加载图标

1 个答案: