Question

我想每1秒刷新一次图像。这张照片是由我的网络摄像头动态生成的，但是当浏览器在显示之前没有加载图片时，此脚本有时会显示损坏的图像。如何检测图片何时加载然后更改diplay图片？我有这样的代码：

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


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

Answer 1

在更换图像之前，您应该先等待图像加载。

为此，您可以使用不同的方法。我通常做的是创建另一个不可见的图像，并替换上一个图像加载后可见的图像。

如果您想要遵循这种方法，您的代码应如下所示：

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

你还可以做的是使用css样式来根据状态隐藏或显示图像，但这会使你的图像显得和消失，这有点难看......

我希望它有所帮助：）

Answer 2

我认为你可以使用这样的东西：

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

我认为在文件属性中查看lastModified时间是假设图像在服务器上写完的好方法。

希望这有帮助。

Answer 3

加载文档后尝试使用此文件

  $(function() {

        $.getJSON('https://api.jcdecaux.com/vls/v1/stations?contract=paris&apiKey=de4b32d53a372975a38df03d8f31b7edd9c9b793', function(data) {
           //Modified code
            for (var i = 0; i < data.length; i++) {
                console.log(data[i]);
                var lat = data[i].position.lat;
                var lng = data[i].position.lng;
                var position = {
                    lat: lat,
                    lng: lng
                };


                var marker = new google.maps.Marker({
                   //Modified code
                    position: new google.maps.LatLng(position),
                    map: map,
                });

            };

        });
    });

希望这有帮助

Javascript显示动态变化的图像

3 个答案: