Question

我正在尝试显示gif（动画）和jpeg相同的图像。我每隔几秒钟更改一次src。

我在开发工具中看到src已更改，但是gif无法动画。

setInterval(function(){

 if(c == 1){

     imgExt = 'assets/images/resize.gif'
     ++c;
 }
 else{
    imgExt = 'assets/images/resize.jpg';
     --c;
 }
//  document.querySelector('#floorImgId').src = imgExt;
 $('#floorImgId').attr('src', imgExt);
}, 3000)`

当我检查元素时，它正在改变，但是在页面中，gif无法播放。我在做什么错了？

Answer 1

您需要首先设置c = 1，以便++c可以正常工作：

（某些程序员喜欢在0和1之间切换，而您的原始代码在1和2之间切换。两者都可以工作，这取决于您。）

在0和1之间切换：

（我可能还使用了prop()而不是attr()，但要使其与原始版本保持接近：）

let c = 0;

setInterval(function() {
  if (c === 0) {
    imgExt = 'https://i.imgur.com/GCPeHoX.png';
    ++c;
  } else {
    imgExt = 'https://i.imgur.com/J2wgZZb.png';
    --c;
  }
  //  document.querySelector('#floorImgId').src = imgExt;
  $('#floorImgId').attr('src', imgExt);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">

如果只是切换，我倾向于只使用：

let toggle = true;
setInterval(function() {

  if (toggle) {
    imgExt = 'https://i.imgur.com/GCPeHoX.png';
  } else {
    imgExt = 'https://i.imgur.com/J2wgZZb.png';
  }
  toggle = !toggle;

  //  document.querySelector('#floorImgId').src = imgExt;
  $('#floorImgId').attr('src', imgExt);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">

要隐藏toggle以使其不会污染外部范围，只需将整个东西包装在IIFE中，或者也可以使用：

setInterval((function() {
  let toggle = true;

  return function() {
    if (toggle) {
      imgExt = 'https://i.imgur.com/GCPeHoX.png';
    } else {
      imgExt = 'https://i.imgur.com/J2wgZZb.png';
    }
    toggle = !toggle;

    //  document.querySelector('#floorImgId').src = imgExt;
    $('#floorImgId').attr('src', imgExt);
  };

}()), 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">

Answer 2

从您的代码中，我认为您必须在else语句中递增c，在if语句中递减c：

c=0;
setInterval(function(){

 if(c == 1){

     imgExt = 'assets/images/resize.gif'
     --c;
 }
 else{
    imgExt = 'assets/images/resize.jpg';
     ++c;
 }
//  document.querySelector('#floorImgId').src = imgExt;
 $('#floorImgId').attr('src', imgExt);
}, 3000)

Answer 3

<nb-calendar [(date)]="date" [showHeader]="false" 
            [dayCellComponent]="dayCellComponent" [yearCellComponent]="yearCellComponent">
</nb-calendar>

每隔几秒钟更改一次图像的src

3 个答案: