Javascript 防止图像框损坏_Javascript_Html

Javascript 防止图像框损坏

javascript html

Javascript 防止图像框损坏,javascript,html,Javascript,Html,我编写了这个简单的HTML/JavaScript代码，以更好的方式查看显示器上的一些IP摄像头；当图片不可用时，我希望有上一张图片，或者至少只有黑色背景，而不是“断开图像链接”框解决了代码如下： <body style="margin:0; background-color:black;"> <div style="height:100%; background-color:black; position:fixed;"> <img height="50

我编写了这个简单的HTML/JavaScript代码，以更好的方式查看显示器上的一些IP摄像头；当图片不可用时，我希望有上一张图片，或者至少只有黑色背景，而不是“断开图像链接”框

解决了

代码如下：

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

//

试着看一下这篇文章，看看它是否对你有帮助：非常感谢，这似乎很有效，但无论如何，如果我能在新图片还没有准备好的情况下留下上一张图片，那就太好了。

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

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