防止图像框损坏
防止图像框损坏
提问于 2012-09-05 22:29:32
我编写了这段简单的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回答 1
Stack Overflow用户
发布于 2012-09-06 16:49:08
解决了！
代码如下：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12283775
复制相关文章
相似问题
腾讯云开发者
