防止破碎的圖像框

我寫了這個簡單的HTML/JavaScript代碼，以更好的方式查看顯示器上的一些IP攝像機;當圖片不可用時，我想要獲得上一張圖片或至少只是黑色背景，而不是「斷開的圖片鏈接」框。防止破碎的圖像框

<body style="margin:0; background-color:black;"> 
<div style="height:100%; background-color:black; position:fixed;"> 
    <img height="50%" name="Camera1"/> 
    <img height="50%" name="Camera2"/> 
    <br> 
    <img height="50%" name="Camera3"/> 
    <img height="50%" name="Camera4"/> 
</div> 
</body> 

<script language="JavaScript"> 
//<!-- 
function reloadImage() 
{ 
    var now = new Date(); 
    var Camera1 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2' 
    var Camera2 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719' 
    var Camera3 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247' 
    var Camera4 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678' 

    if (document.images) 
    { 
     document.images.Camera1.src = Camera1 + '?' + now.getTime(); 
     document.images.Camera2.src = Camera2 + '?' + now.getTime(); 
     document.images.Camera3.src = Camera3 + '?' + now.getTime(); 
     document.images.Camera4.src = Camera4 + '?' + now.getTime(); 
    } 
    setTimeout('reloadImage()',1000); 
} 

setTimeout('reloadImage()',1000); 
//--></script>

它可以是這樣的東西嗎？（我寫的，但我不是在JavaScript的那麼好，所以不知道爲什麼它不工作：

//...(inside the if(document.images)... 
var image = new Image; 
image.onerror = function() { blank(this); }  
image.src = Camera1 + '?' + now.getTime(); 
document.images.Camera1 = image

來源

2012-09-05 Stefano

嘗試服用看看這篇文章，看看它是否可以幫助你：http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images – Chase

非常感謝，這似乎是工作，但無論如何將是真正的很好，如果我可以離開以前的形象，如果新的沒有準備好。 – Stefano

解決

下面的代碼：

<body style="margin:0; background-color:black;"> 
<div style="height:100%; background-color:black; position:fixed;"> 
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/> 
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/> 
    <br> 
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/> 
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/> 
</div> 
</body> 

<script language="JavaScript"> 
//<!-- 

function reloadImage() 
{ 
    var now = new Date(); 
    var Camera = new Array() 
    var Camera1 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2' 
    var Camera2 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719' 
    var Camera3 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247' 
    var Camera4 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678' 

    if (document.images) 
    { 
     var image1 = new Image; 
     var image2 = new Image; 
     var image3 = new Image; 
     var image4 = new Image; 

     image1.onload = function() { document.images.Camera1.src = image1.src; } 
     image2.onload = function() { document.images.Camera2.src = image2.src; } 
     image3.onload = function() { document.images.Camera3.src = image3.src; } 
     image4.onload = function() { document.images.Camera4.src = image4.src; } 

     image1.src = Camera1 + '?' + now.getTime(); 
     image2.src = Camera2 + '?' + now.getTime(); 
     image3.src = Camera3 + '?' + now.getTime(); 
     image4.src = Camera4 + '?' + now.getTime(); 
    } 
    setTimeout('reloadImage()',1000); 
} 

setTimeout('reloadImage()',1000); 
//--> 
</script>

來源

2012-09-06 08:49:08 Stefano

防止破碎的圖像框

回答

相關問題