come mostra l’immagine solo quando è completamente caricato?

Ho un tag img nel mio sito web. Ho dato l’url di una telecamera IP da dove ottenere immagini e visualizzarle. Voglio mostrare l’immagine quando è completamente caricato. in modo che io possa evitare lo sfarfallio. Faccio la seguente.

<img id="stream"
  width="1280" height="720" 
  alt="Press reload if no video displays" 
  border="0" style="cursor:crosshair; border:medium; border:thick" />

<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>

codice javascript

function LoadImage()
{
  x = document.getElementById("stream");    
  x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
}

function onStartLiveBtnClick()
{       
  intervalID = setInterval(LoadImage, 0);
}

in questo codice. quando l’immagine è grande. ci vuole un po ‘ di tempo per caricare. nel frattempo è iniziato mostrando la parte di immagine caricata. Voglio visualizzare l’immagine completa e saltare il caricamento di parte Grazie

NON impostare un intervallo per il caricamento dell’immagine e quindi aggiungere una data per l’url dell’immagine. Caricare l’immagine ancora e ancora e ancora e ancora e… Anche non impostare l’intervallo di zero, ma di impostare almeno 100ms per farlo andare più liscia.

InformationsquelleAutor Sarfraz Ahmed | 2013-01-17

2 Replies
  1. 17

    Precaricare l’immagine e sostituire l’origine del <img /> dopo che l’immagine è terminato il caricamento.

    function LoadImage() {
        var img = new Image(),
            x = document.getElementById("stream");
    
        img.onload = function() {
            x.src = img.src;
        };
    
        img.src = "http://IP:PORT/jpg/image.jpg" + "?_=" + (+new Date());
    }

    InformationsquelleAutor Andreas

  2. 1

    È possibile utilizzare il complete proprietà per verificare se l’immagine ha terminato il caricamento. Tuttavia, penso che ci sono altri problemi con il codice, principalmente si sono caricamento più volte la stessa immagine. Invece, si dovrebbe caricare solo una volta e quindi controllare il complete proprietà in un intervallo di tempo.

    Qualcosa come questo dovrebbe funzionare:

    function LoadImage()
    {
      x = document.getElementById("stream");    
      x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
      x.style.visibility = 'hidden';
    }
    
    function CheckIsLoaded() {
      x = document.getElementById("stream");    
      if (x.complete) x.style.visibility = 'visible';
    }
    
    function onStartLiveBtnClick()
    {       
      LoadImage();
      intervalID = setInterval(CheckIsLoaded, 0);
    }

    InformationsquelleAutor laurent

Lascia un commento