changer le src de l'image toutes les quelques secondes

Question

changer le src de l'image toutes les quelques secondes

Demandé el 11 de Janvier, 2020: Quand la question a-t-elle été
135 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'afficher la même image qui est un gif (animé) et un jpeg. Je modifie les src toutes les quelques secondes.

Je vois dans les outils de développement que le src a changé, mais le gif ne s'anime pas.

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)`

Il change lorsque j'inspecte l'élément, mais dans la page, le gif n'est pas lu. Qu'est-ce qui ne va pas ?

Demandé el 11 de Janvier, 2020 par Dwight Schrute

Answer 1

3 Réponses

Answer 2

1voto

動靜能量 Points 33008

Vous devez définir c = 1 pour commencer, de sorte que ++c fonctionnera :

(certains programmeurs préfèrent alterner entre 0 y 1 alors que votre code original basculait entre 1 y 2 . Les deux fonctionnent et c'est à vous de décider).

Basculer entre 0 y 1 :

(J'aurais également pu utiliser prop() au lieu de attr() mais de rester proche de votre version originale :)

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

S'il s'agit d'une simple bascule, j'ai tendance à l'utiliser :

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

Pour cacher le toggle afin qu'il ne contamine pas la portée extérieure, il suffit d'envelopper le tout dans un IIFE, ou vous pouvez également utiliser :

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

Répondu el 11 de Janvier, 2020 par 動靜能量 (33008 Points )

Answer 3

0voto

Ritesh Khandekar Points 3672

D'après votre code, je pense que vous devez incrémenter c dans l'instruction else et décrémenter c dans l'instruction if :

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)

Répondu el 11 de Janvier, 2020 par Ritesh Khandekar (3672 Points )

Answer 4

0voto

PSKP Points 966

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<img id="floorImgId" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png" />

<script>
var c = 1,imgExt = "";
setInterval(function(){

 if(c == 1){

     imgExt = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png'
     ++c;
 }
 else{
    imgExt = 'https://buffer.com/library/wp-content/uploads/2016/06/giphy.gif';
     --c;
 }
 $('#floorImgId').attr('src', imgExt);
}, 3000);

</script>
</body>

</html>

Répondu el 11 de Janvier, 2020 par PSKP (966 Points )

changer le src de l'image toutes les quelques secondes

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

changer le src de l'image toutes les quelques secondes

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: