Bild erscheint nicht in Canvas - manchmal

Question

Das funktioniert gut bei allen meinen Tests, aber auf dem Live-System habe ich ein Problem.

Es gibt drei verschiedene, aber identische Leinwände. Sie sind alle anfänglich mit 640x480 JPG-Bildern bemalt. Die dritte wird dann jede Sekunde mit einem neuen 640x480 jpg Bild aktualisiert.

Aus irgendeinem Grund wird das ursprüngliche statische Bild für die dritte Zeichenfläche - und nur diese Zeichenfläche - nicht vom Live-Server geladen, sondern nur für die Tests.

Hier ist der 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> 

Hier ist die 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> 

Und hier ist das 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); 
    } 

Jede Idee, warum der der dritte Leinwand beginnt leer meisten Zeit?

Answer 1

Durch Hinzufügen einer längeren Verzögerung vor dem Start des Aktualisierungszyklus hatten die Browser mehr Zeit, um das anfängliche "Standard" -Bild zu laden. Ich habe es auf 1500ms eingestellt, und jetzt ist es ziemlich zuverlässig.

(Danke für die Hilfe ...)