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>
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" />
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.
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.
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
Related
I have this line of HTML in my code:
<img src="https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png" id="site-logo" alt="Mundo New Impact">
and what I want to do is that, everytime an user loads any page from my website, this img loads a .gif file (which is: https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif) for a couple of seconds, enough for its animation to finish, and then replace this .gif file to the original .png file.
I tried using this piece of javascript code, but it doesn't work:
function play(){
var img = document.getElementById("site-logo");
if (img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png"){
img.src = "https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif";
}else{
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
setTimeout(function(){end()},10000);
}
function end(){
document.getElementById("site-logo").src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
What am I doing wrong? I am a total noob so help me please!
You need to call play()in order to run the function.
You also have mistakes like if (img.src = ... instead of if (img.src == ....
I would work with event handlers, like, show the GIF animation and when the document ready event triggers, change the GIF to a different image.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var img = document.getElementById("site-logo");
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
});
</script>
<body style="margin:0px;padding:0px;overflow:hidden" onload="img.src='http://sjabbo.net/logo.png?'+(+new Date())">
<img id="img"
onload="iframe.src='http://sjabbo.net'"
onerror="iframe.src='offline.html'"
width="0px" height="0px">
<iframe width="100%" height="1000px"></iframe>
</body>
So, if the local user has an internet connection, then the iframe should change to "http://sjabbo.net" but if not, then "offline.html"
but it does not seem to work.
How about this:
<body style="margin:0px;padding:0px;overflow:hidden">
<img id="img" src="http://sjabbo.net/logo.png"
onload="document.getElementById('iframe').src='http://sjabbo.net'"/>
<iframe src="offline.html" id="iframe" width="100%" height="1000px"></iframe>
</body>
You could introduce "testing" page like this:
<body style="margin:0px;padding:0px;overflow:hidden">
<img id="img" src="http://sjabbo.net/logo.png"
onload="document.getElementById('iframe').src='http://sjabbo.net'"
onerror="document.getElementById('iframe').src='offline.html'"/>
<iframe src="testing.html" id="iframe" width="100%" height="1000px"></iframe>
</body>
First, you can't just use "img", because, to JavaScript, it's not defined anywhere globally. If you want to access the image by its ID, you need to do the following. Also, I'm guessing you want to have a timestamp instead of the long date. Put something like this in your onload:
document.getElementById('img').src = 'http://sjabbo.net/logo.png?' + (new Date()).getTime()
Do the same with your iframe (you'll have to assign it an ID first).
I don't think you've understood how web works.
You don't need to add an onload to every element that has a child. Each element is created one after another. So for now remove all your onloads.
You seem to want to wait to know if your image gets loaded correctly or not. Depending on this you want to activate your iframe.
You'll want to create a javascript tag ( or for good practice, create a js file ).
var img = document.getElementById('img'),
iframe = document.getElementById('iframe'); //add iframe as an id to your iframe
img.onload = function(){
//this is called when the image is finished loading.
iframe.src = 'http://sjabbo.net';
};
img.onerror = function(){
//this is called when the image wasn't able to load properly
iframe.src = 'offline.html'; //To be honest this doesn't make much sense
//You should instead just hide the iframe and the image
iframe.style.visibility = 'none';
img.style.visibility = 'none';
};
img.src = 'http://sjabbo.net/logo.png?' + (new Date()).getTime();
For future programming please try to seperate your js and css from your html. It is not good practice what you are currently doing.
<!--WunderGroundRadar-->
<script type = "text/javascript">
setInterval(function refreshRadar() {
document.getElementById("content14").src = "http://api.wunderground.com/api/MyAPIkey/animatedradar/q/autoip.gif?&radius=90&num=15&delay=20&width=430&height=500&smooth=1&newmaps=1&interval=15&rainsnow=1"
}, 900000);
</script>
I use the code above to refresh a weather radar .gif image on my website about every 15 minutes. This normally works great, but sometimes when the refresh takes place the image is broken from it's source and my site has a broken image icon until the next refresh takes place approx. 15 minutes later. I would like to set this up so that if the requested image is broken or not available at the time that the refresh function runs, I keep the image that is already loaded instead of replacing it with a broken image icon. I am willing to use any javascript or Jquery that might achieve this, but I am a novice programmer, so if you could break down any intricate code that would be much appreciated. Thanks!
You can try something like this
<script type = "text/javascript">
setInterval(function refreshRadar() {
img = new Image();
img.onload = function(){
document.getElementById("content14").src = img.src;
};
img.src = "http://api.wunderground.com/api/MyAPIkey/animatedradar/q/autoip.gif?&radius=90&num=15&delay=20&width=430&height=500&smooth=1&newmaps=1&interval=15&rainsnow=1"
}, 900000);
</script>
it attempts to load source to a temporary image and only on successful load assings source to "content14"
I am working on an HTML5 facebook game (inside facebook canvas iframe) in which I use jquery in addition to some other js files, css files (image files, in the css files), font files, sound files and screens (html divs in seperate files).
I want to have a loading script as the size of the resources is around 1 MB. There are two options;
first one is writing a resource loader and load everything in correct order which really is painful.
second one is first having a simple loading screen at startup, which will be quicly loaded, upon loading this page, starting to load the actual html (with js, css and everyting) and handing over the loading process to the browser client.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function iframeIsLoaded()
{
...
}
</script>
</head>
<body>
<div id="loadingScreen" class="..."> <!-- iframe will be under this div -->
...
</div>
<iframe ...>
</iframe>
...
obviously second option is much better but I don't have a clue how to do it. As shown above, I may use an iframe under the loading screen div but is there a way to send a message to the upper div from the iframe?
I am also open to other solutions!
You can do this using the iframe.load event.
What you will want to do is hide the iframe on page load and show the loading screen, then you want to wait until the content is loaded then Show the frame and hide the Loading screen.
(This example assumes you are using the src attribute of the IFrame to load the content)
Pure Javascript : Example JSFiddle
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loadingScreen');
frame.style.display = 'none';//Originally hide the frame
loading.style.display = 'block';//Originally show the Loading Screen
frame.src = 'http://www.bing.com';//Set the src attribute
frame.onload = function() {
frame.style.display = 'block';//Show the frame after it is loaded
loading.style.display = 'none';//Hide the loading screen
}
EDIT : (Removed jQuery Example and Added a new Example based on Comment)
Here is a new example that checks the child page for the variable done to check if it is set to true.
Warning this example has the potential to not work due to Cross-Domain Scripting Security, this should only be used if you are 100% that both pages are on the same Domain
Child Page :
var done = false;
setTimeout(function () {
done = true;
}, 10000);
Parent Page : (Script needs placing after the HTML / Before the end of the Body Tag ())
<div>
<div id="loading">
Loading...
</div>
<iframe id="iframeID"></iframe>
</div>
<script type="text/javascript">
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loading');
frame.style.display = 'none'; //Originally hide the frame
loading.style.display = 'block'; //Originally show the Loading Screen
frame.src = 'Test2.aspx'; //Set the src attribute
frame.onload = function () {
console.log('Loaded Frame');
}
var $interval = setInterval(CheckFrameDone, 500);
function CheckFrameDone() {
var done = frame.contentWindow.done;
console.log(done);
if (done) {
console.log('Frame is Finished Loading');
frame.style.display = 'block';
loading.style.display = 'none';
clearInterval($interval);
} else {
console.log('Still Waiting...');
}
}
</script>
With the second example you will notice that every 500 Milliseconds the parent page will check the child page for the done value, if it is true it will show the frame and clear the interval. Otherwise it will just continue to check.
I'm creating a website which streams real time data images from a remote system and displays them on the website. These images change at the remote site every 5 seconds and hence we auto reload/refresh these images.
PROBLEM : The image refresh takes place correctly & smoothly on IE and chrome, but in Firefox every auto refresh causes a flicker. This is unwanted behavior. How do I fix this?
PS I am using joomla articles within which I embed the required javascript
<center>
<img id="pic" src="images/CB1.jpeg" border="0" width="700" height="700"/></center>
<script language="javascript" type = "text/javascript">
function refresh()
{
document.images["pic"].src = "images/CB1.jpeg" + "?" + new Date().getTime();
}
window.onload=function(){
setInterval(function(){refresh()}, 5000 );
}
</script>
This is script is embedded in joomla articles. The image is around 300~350 KB.
Without being able to test on your machine, I can't say for certain but I think Cobra_Fast is correct in that the image is rendering before it's finished loading. To get around this, make sure you don't replace the old image until after the new image has finished loading. This should work:
<img id="pic" src="images/CB1.jpeg">
<script language="javascript" type = "text/javascript">
function refresh() {
// create new image obj
var image = new Image();
// replace the existing image once the new image has loaded
image.onload = function () {
document.images["pic"].src = image.src;
}
// set the source of the new image to trigger the load
image.src = "images/CB1.jpeg" + "?" + new Date().getTime();
}
window.onload=function(){
setInterval(function(){refresh()}, 5000 );
}
</script>