Chcę odświeżyć obraz co 1 sekundę. To zdjęcie jest dynamiczne generowane przez moją kamerę internetową, ale ten skrypt czasami wyświetla złamane obrazy, gdy przeglądarka jeszcze nie załadowała zdjęcia przed wyświetleniem. Jak wykryć, gdy zdjęcie jest załadowane, a następnie zmień zdjęcie Diplay? Mam taki kod:

    <img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var myImageElement = document.getElementById('image');
    myImageElement.src = 'webcam.jpg?rand=' + Math.random();
}, 1000);
</script>
0
ADIN 26 czerwiec 2017, 12:07

3 odpowiedzi

Najlepsza odpowiedź

Powinieneś poczekać, aż obraz zostanie załadowany, przed wymianą.

W tym celu można użyć różnych podejść. To, co zwykle robię, jest stworzenie innego obrazu, który nie jest widoczny i zastępuje widoczny, gdy poprzedni obraz zostanie załadowany.

Twój kod powinien wyglądać tak, jeśli chcesz przestrzegać tego podejścia:

<img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var url = 'webcam.jpg?rand=' + Math.random();
    var img = new Image();
    img.src = url;
    img.addEventListener('load', function() {
        var myImageElement = document.getElementById('image');
        myImageElement.src = url;
    });
}, 1000);
</script>

Co możesz zrobić, to grać w stylach CSS, aby obraz ukryty lub widoczny w zależności od stanu, ale uczyniłoby pojawienie się i zniknąć, co jest nieco brzydkie ...

Mam nadzieję, że to pomoże :)

4
ajimix 26 czerwiec 2017, 09:21

Spróbuj użyć tego po załadowaniu dokumentu

$( document ).ready(function() {
    setInterval(function() {
    var myImageElement = document.getElementById('image');
    myImageElement.src = 'webcam.jpg?rand=' + Math.random();
}, 500);
});

Mam nadzieję że to pomoże

-2
Prags 26 czerwiec 2017, 09:13

Myślę, że możesz użyć czegoś takiego:

var _img = document.getElementById('pic'),
urlToImage = 'pic.jpg',
modified = false, lastModified = 0;

setInterval(function(){


fetch(urlToImage)
    .then(function(resp){
    	var f = new File([resp],"file");
      
    	switch(true) {
        case modified === false:
          lastModified = f.lastModified;
          modified = true; break;
          
          default:
          modified = false;
          if(lastModified < f.lastModified) {
            modified = true;
          }
    
      }
      
    	return resp.blob();
    })
    .then(function(blobdata){
      switch(true) {
        case modified === true:
        var obj_url = URL.createObjectURL(blobdata);
    	  _img.src = obj_url;
      break;
      }
    	
    });

},1000);
<img src="" id="pic" alt="LOCAL pic here"/>

Myślę, że patrząc na ostatni zmodyfikowany czas w właściwościach plików jest dobrym sposobem na zakładanie obrazu został zakończony na serwerze.

Mam nadzieję że to pomoże.

2
Nineoclick 26 czerwiec 2017, 10:09