如何僅在完全加載時顯示圖像？

我的網頁上有一個img標籤。我給它一個網絡攝像機的URL，從中獲取圖像並顯示它們。我想在完全加載時顯示圖像。這樣我可以避免閃爍。我做了以下。如何僅在完全加載時顯示圖像？

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

JavaScript代碼

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

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

在此代碼。當圖像很大時。加載需要一些時間。同時它開始顯示加載的圖像部分。我想顯示完整圖像並跳過加載部分謝謝

來源

2013-01-17 Sarfraz Ahmed

不要設置加載圖像的時間間隔，然後向圖像的url添加日期。它會一次又一次地加載圖像，並且...也不要將間隔設置爲零，但將其設置爲至少100ms以使其運行更平滑。 – Jacco

預載圖片並更換<img />圖像加載完成後的源。

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

來源

2013-01-17 07:05:35 Andreas

另請參閱http://stackoverflow.com/questions/3646036/javascript-preloading-images – Jacco

您可以使用complete屬性來檢查圖像是否已完成加載。但是，我認爲您的代碼還有其他問題，主要是您反覆加載相同的圖像。相反，您應該只加載一次，然後在一個時間間隔內檢查complete屬性。

像這樣的東西應該工作：

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

來源

2013-01-17 06:59:59

如何僅在完全加載時顯示圖像？

回答

相關問題