how to remove delay in image loading in html?

Question

I create a web page and put an img tag on this page. the img.src is the url of the image from the network IP camera. It works but the stream I get have delays. I understand this delay is because I load the image and loading image takes some time. my question is how can I minize these delay. I do the following;

<script language="Javascript">
    x = document.getElementById("stream");
    intervalID = setInterval(LoadImage, 0);

    function LoadImage()
    {
      x = document.getElementById("stream");
      x.src = "http://IP:PORT/jpg/image.jpg";
    }
</script>    

<img id="stream"     
    width="640" height="480" 
    alt="Press reload if no video displays" 
    border="0" style="cursor:crosshair; border:medium; border:thick" />

<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>

@Christoph I am on network. it is a network address not from internet. — Sarfraz Ahmed, Jan 16 '13 at 12:46
@Bharath how can I do it using AJAX, I am new to all these web technologies. Thanks — Sarfraz Ahmed, Jan 16 '13 at 12:47
btw. `setInterval(..., 0)` is useless, the browser minimum is 4ms. — Christoph, Jan 16 '13 at 12:52
The way to do this would be to delay the stream of pictures, download them in the background, attach them hidden to the DOM, and then display them in order 10 or so seconds later. — gkiely, Jan 16 '13 at 12:57
Just show and hide the images instead of setting the src in setInterval. — BalaKrishnan웃, Jan 16 '13 at 12:59
how can I make img tag to show when it is completely loaded. this will remove flickering?? thanks — Sarfraz Ahmed, Jan 17 '13 at 05:24

SeinopSys · Accepted Answer · 2015-07-01T21:02:32.100

I've just found your question in the unanswered section and decided to give it a go. The following script creates an internal <img> tag (with new Image()), assigns the necessary attributes, then sets an onload "event handler" attribute, which checks when the image loaded. When that function is called, the #stream is replaced by the new internal image tag.

In case the #stream is not directly inside the body tag (i.e. inside another element like a <div>), edit streamParentElement to point to the image's parent element.

I added a ?nocache query parameter to the string, because while I was testing the code, I found out that the image tag was changing but the visible image stayed the same. I also added a loadDelay, because the images on my client were loading too fast, and it got to the point where it crashed my browser. I advise you to not lower that value below 50. Live demonstration of this code here

<script language="Javascript">
    var streamParentElement = document.body, loadDelay = 200;
    setTimeout(MakeImage,1);    

    function MakeImage(){
        var img = new Image();
        img.src = "http://IP:PORT/jpg/image.jpg?nocahce="+new Date().getTime()+Math.random();
        img.width = 640;
        img.height = 480;
        img.style.border = 0;
        img.style.cursor = 'crosshair';
        img.id = 'stream';
        img.onload = function(){
            var stream = document.getElementById("stream");
            streamParentElement.insertBefore(img,stream);
            stream.outerHTML = '';
            setTimeout(MakeImage, loadDelay);
        };
    }
</script>    

<img id="stream" alt="Press reload if no video displays" />

score -2 · Answer 2 · answered Jan 16 '13 at 13:35

create your html page. eg:

<html>
<head>
    <title>
        Some Page
    </title>
    </link rel="stylesheet" href="path to your css file"/>
    <script type="text/javascript" src="path to you javasctipt file"></script>
</head>
<body>
    <h1 onClick="javascript:someFunction()">
        Click here
    </h1>
</body>
</html>

you can then create many other "someFunction" functions. They all just reference the AJAX function.this is just to make typing a little less...

The easiest ajax way:

var path;
var div;
var xmlhttp = new XMLHttpRequest();

function someFunction()
    {
        path = "path to another html file";
        div = "the name of the div tag's content you want to change eg. content";
        AJAX(path, div);
    }

function AJAX(path, div)
    {
        xmlhttp.open("GET", path, false);
        xmlhttp.send();
        if (xmlhttp.readyState == 4)
        {
            document.getElementById(div).innerHTML = xmlhttp.responseText;
        }
    }

now just include the image in the html file. ajax allows you to change just the content of the div you gave it, without reloading the whole page.

How does loading an extra HTML file with JavaScript solve the problem of the image taking a long time to load? — Quentin, Jan 16 '13 at 13:37
well then I reference the other's comments. make the image smaller. you cannot change the load time if your internet is too slow. otherwise then just wait for it to load. but ajax will definately speed things up if navigation comes in. — Fred, Jan 16 '13 at 13:42
I can remove flickering by using two images at the same time. when one complete loaded, it should be visible while behind the scene other keep on loading. and so on... — Sarfraz Ahmed, Jan 17 '13 at 05:22

score -2 · Answer 3 · answered Jan 16 '13 at 15:25

-2

I would try putting your images into photoshop and making the resolution 72 or less. Also if you save the images as a GIFs they should be much smaller.

answered Jan 16 '13 at 15:25

jacobgelman

334
2
12

Saving the images as GIFs *might* make the images smaller - but if they are photographs, it will make them look *horrible*. – Andrew Barber Feb 27 '13 at 00:22
You can't really put a dynamic image into Photoshop, or, any image editing program for that matter. It's constantly changing, and by the time it'd be re-sized a newer one is already available. – SeinopSys Aug 04 '14 at 23:09

score -2 · Answer 4 · edited May 23 '17 at 11:58

-2

maybe handle the image loading in an outside script that runs faster than a web page refreshes, then embed it? like a "videoloader.js" so that it can load separately and not have to wait on the html page to load.

<script src="videoloader.js"></script>

you could also convert the images shown on the fly into lesser quality jpgs using javascript

see if this helps: Load lower quality image if higher one inst available

edited May 23 '17 at 11:58

Community

1
1

answered Jun 16 '14 at 19:07

user3743779

1
3

The issue is not with the page loading slow, it's the dynamic image that loads slowly. – SeinopSys Aug 04 '14 at 23:10

how to remove delay in image loading in html?

4 Answers4