イメージがキャンバスに表示されない - 時々

Question

これは私のテストですごく効果的ですが、実際のシステムでは問題があります。

3つの異なるが同じキャンバスがあります。それらはすべて640×480のjpg画像で最初にペイントされます。 3分の1秒ごとに新しい640x480 jpgイメージが更新されます。

何らかの理由で、第3のキャンバス（およびそのキャンバスのみ）の元の静止画像は、ライブサーバーからはテストでのみロードされません。ここで

は、HTMLです：

<div style="padding: 1vw;"> 
    <a href="/virtualscribe" class="camLink"> 
     <div class="camDiv"> 
      <div class="camBox" id="picBoxLeft"> 
       <canvas id="canvasLeft" class="camBorder"></canvas> 
      </div> 
     </div> 
    </a> 
    <a href="/videos" class="camLink"> 
     <div class="camDiv"> 
      <div class="camBox" id="picBoxCenter"> 
       <canvas id="canvasCenter" class="camBorder"></canvas> 
      </div> 
     </div> 
    </a> 
    <div class="camDiv"> 
     <div class="camBox" id="picBoxRight"> 
      <canvas id="canvasRight" class="camBorder"></canvas> 
     </div> 
    </div> 
</div> 

はここにCSSです：

<style> 
    .camBox { 
     max-width: 28vw; 
     width: 28vw; 
     height: 21vw; 
     max-height: 21vw; 
     display: inline-block; 
    } 
    .camDiv { 
     padding: 1.5vw; 
     display: inline-block; 
    } 
    .camBorder { 
     border: 0.6vw solid #fe890f; 
     border-top-left-radius: 3.3vw; 
     border-bottom-right-radius: 3.3vw; 
    } 
    .camLink { 
     color: transparent; 
    } 
</style> 

そして、ここでは、JavaScriptです：

var refreshTimer; 
    var imgLiveCam; 

    function drawPictureBox(img, canvas, text) { 
     var context = canvas.getContext("2d"); 
     context.drawImage(img, 0, 0, canvas.width, canvas.height); 
     context.globalAlpha = 0.6; 
     context.fillStyle = "rgb(244,121,32)"; 
     context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33); 
     context.globalAlpha = 1; 
     var maxWidth = canvas.width; 
     var x = canvas.width/2; 
     var y = canvas.height * 0.85; 
     context.font = canvas.width/12 + 'px Oswald'; 
     context.strokeStyle = 'black'; 
     context.lineWidth = 2; 
     context.textAlign = "center"; 
     context.strokeText(text, x, y, maxWidth); 
     context.fillStyle = 'white'; 
     context.fillText(text, x, y, maxWidth); 
    }; 
    function drawCamBox(img, logo, canvas) { 
     var context = canvas.getContext("2d"); 
     context.drawImage(img, 0, 0, canvas.width, canvas.height); 
     context.globalAlpha = 0.6; 
     context.fillStyle = "rgb(244,121,32)"; 
     context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33); 
     var eSize = canvas.height/10; 
     context.globalAlpha = 1; 
     context.drawImage(logo, 2, canvas.height * 0.67 - eSize, eSize, eSize); 
     var now = new Date(); 
     var text = now.toLocaleDateString() + " " + now.toLocaleTimeString(); 
     var maxWidth = canvas.width * 0.33; 
     var x = canvas.width - 10 - maxWidth; 
     var y = canvas.height * 0.67 - 10; 
     context.font = maxWidth/10 + "px Arial"; 
     context.strokeStyle = 'black'; 
     context.lineWidth = 2; 
     context.strokeText(text, x, y, maxWidth); 
     context.fillStyle = 'white'; 
     context.fillText(text, x, y, maxWidth); 
     text = 'View Our Production Floor'; 
     context.textAlign = "center"; 
     maxWidth = canvas.width; 
     x = canvas.width/2; 
     y = canvas.height * 0.85; 
     context.font = canvas.width/12 + 'px Oswald'; 
     context.strokeText(text, x, y, maxWidth); 
     context.fillText(text, x, y, maxWidth); 
    } 
    function addResizeListener(fn) { 
     if (window.attachEvent) { 
      window.attachEvent('onresize', fn) 
     } else if (window.addEventListener) { 
      window.addEventListener('resize', fn, true); 
     }; 
    } 
    function initCam() { 
     var imgLeft = new Image(); 
     imgLeft.onload = function() { 
      var canvas = document.getElementById("canvasLeft"); 
      var picBox = document.getElementById("picBoxLeft"); 
      var drawFn = function() { 
       canvas.height = picBox.clientHeight; 
       canvas.width = picBox.clientWidth; 
       drawPictureBox(imgLeft, canvas, 'Looking for a Scribe?'); 
      }; 
      drawFn(); 
      addResizeListener(drawFn); 
     } 
     var imgCenter = new Image(); 
     imgCenter.onload = function() { 
      var canvas = document.getElementById("canvasCenter"); 
      var picBox = document.getElementById("picBoxCenter"); 
      var drawFn = function() { 
       canvas.height = picBox.clientHeight; 
       canvas.width = picBox.clientWidth; 
       drawPictureBox(imgCenter, canvas, 'Watch In-Depth Videos'); 
      }; 
      drawFn(); 
      addResizeListener(drawFn); 
     } 
     imgLiveCam = new Image(); 
     var logo = new Image(); 
     logo.src = "e.png"; 
     imgLiveCam.onload = function() { 
      var canvas = document.getElementById("canvasRight"); 
      var picBox = document.getElementById("picBoxRight"); 
      var drawFn = function() { 
       canvas.height = picBox.clientHeight; 
       canvas.width = picBox.clientWidth; 
       drawCamBox(imgLiveCam, logo, canvas); 
      }; 
      drawFn(); 
      imgLiveCam.onload = drawFn; 
      addResizeListener(drawFn); 
     } 
     imgLeft.src = "scribe.jpg"; 
     imgCenter.src = "doc-with-spine.jpg"; 
     imgLiveCam.src = "camloading.jpg"; 
     refreshTimer = setTimeout(refresh, 499); 
    } 
    function refresh() { 
     clearTimeout(refreshTimer); 
     imgLiveCam.src = "http://cams.edataservices.com/17fcam.jpg?t=" + new Date().getTime(); 
     refreshTimer = setTimeout(refresh, 1009); 
    } 

第三キャンバスは空白のほとんどを開始し、なぜすべてのアイデア時間？

Answer 1

リフレッシュサイクルを開始する前に、より長い遅延を追加することで、ブラウザーは最初の「デフォルト」イメージを読み込む時間が増えました。私は1500msで設定しましたが、今はかなり信頼できます。

（おかげさまで...）