Prevent broken Image Box

Question

I wrote this simple HTML/JavaScript code to view some IP cameras on a display in a nicer way; when the picture is not available, I'd like to have the previous image or at least just the black background instead of the "broken image link" box.

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

Can it be something like this? (I wrote it but I'm not so good at JavaScript, so don't know why it's not working:

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

Try taking a look at this post and see if it helps you: http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images — Chase, Sep 05 '12 at 14:38
Thanks a lot, this seems to be working, but anyway would be really great if I can leave the previous image if the new one is not ready. — Stefano, Sep 06 '12 at 08:05

score 0 · Answer 1 · answered Sep 06 '12 at 08:49

Solved!

Here's the code:

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

Prevent broken Image Box

1 Answers1