html 如何只在完全加载时显示图像？

doinxwow 于 2022-12-02 发布在其他

关注(0)|答案(3)|浏览(224)

我有一个img标签在我的网页上。我给予它的网址为一个IP摄像头从那里得到的图像和显示他们。我想显示图像时，它是完全加载。这样我就可以避免闪烁。我做以下。

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

在这段代码中。当图像很大时。它需要一些时间来加载。同时它开始显示加载的图像部分。我想显示完整的图像并跳过加载部分谢谢

Html

来源：https://stackoverflow.com/questions/14373683/how-to-show-image-only-when-it-is-completely-loaded

3条答案

按热度按时间

b5lpy0ml1#

预加载映像，并在映像加载完成后替换<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());
}

赞(0）回复(0）举报 2022-12-02

67up9zun2#

您可以使用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);
}

赞(0）回复(0）举报 2022-12-02

t8e9dugd3#

下面的代码看起来很适合我

<img src="/path/to/image.png" 
    class="d-none" 
    onload="this.classList.remove('d-none')"
 >

基本上，我隐藏了img元素，只有在图像加载后才显示它。这里d-none是定义display:none的引导类，但是如果你不使用引导，你可以定义自己的类。
如果你想保留图片的空间，甚至添加一个默认的背景，你可以使用一个带有ratio ratio-4x3的 Package 器div（用于引导）或其等价的CSS（例如，按宽度比例用height=0填充wrapper），并通过css将背景设置为img。

赞(0）回复(0）举报 2022-12-02

我来回答

html 如何只在完全加载时显示图像？

3条答案

相关问题

热门标签

最新问答