Solved

Safari Javascript Image Reload Issue

Posted on 2012-03-24
3
713 Views
Last Modified: 2012-03-24
I need to get an image to refresh itself via JavaScript instead of reloading the page.

This code:

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" language="JavaScript">
refreshImage = function()
{
document.getElementById('cam').setAttribute('src', 'http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3');
document.getElementById('cam2').setAttribute('src', 'http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3');
document.getElementById('cam2').reload();
document.getElementById('cam1').reload();

}
</script>

</head>
<body>

<center><img src="http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3" id="cam" alt="Image" width="640" height="480" onload="setInterval(refreshImage, 1);"></center><br>
<center><img src="http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3" id="cam2" alt="Image1" width="320" height="240" onload="setInterval(refreshImage, 1);"></center>

</body>
</html>

Open in new window


Works everywhere except for Safari, which I need it to work in.
What could I possible be doing wrong?
It loads the initial image but won't reload.
0
Comment
Question by:dxanon
  • 2
3 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37761470
every time you load the image, you start an interval. That interval is every millisecond - no way can the cam load that fast and you make interval after interval.

Try this code
<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" language="JavaScript">
var tId;
window.onload=function() {
  tId=setInterval(function() {  
    document.getElementById('cam').setAttribute('src', 'http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3&rnd='+new Date().getTime());
    document.getElementById('cam2').setAttribute('src', 'http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3&rnd='+new Date().getTime());
  },1000); // milliseconds so I would suggest 3000 or so
}

</script>

</head>
<body>

<center><img src="http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3" id="cam" alt="Image" width="640" height="480" /></center><br>
<center><img src="http://192.168.1.81/image.jpg?width=2560&height=1920&denom=3" id="cam2" alt="Image1" width="320" height="240" /></center>

</body>
</html>
                                  

Open in new window

0
 

Author Closing Comment

by:dxanon
ID: 37761474
That worked wonderfully, I was actually able to tweak it to around 500 and it works great on the iPad.  Thanks for the quick response I was going crack!.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37761508
YW. Off to bed
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now