I have an Axis camera which has multiple outputs, one of which is a jpg image. This image is a still taken from the camera at the time you load it up. I would like to implement a way for the image to reload (every 30 seconds) without having to reload the entire page, however, I would like for the code to fully download the image before updating it to avoid having a blank screen.
I have been reading around and the closest thing I found was this post Using AJAX / jQuery to refresh an image but the difference is that the image feed I have is coming from the actual camera itself not a php file. I have tried a couple of ways to get this working with my url but I have failed due to the lack of javascript knowledge.
The code I'm using right now to pull up the image is just a simple image tag...
<img src="[camera ip]/jpg/1/image.jpg">
and any time you refresh the browser window it gives you a snapshot of the current video stream.
Any help would be greatly appreciated!
Regards,
Javier
I couldn't find a webcam online with a refreshing image to test this against, but I think this should to the trick for you... or at least get you really close...
<script>
// URL to your cam image
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg';
var buffer = {};
function preload() {
buffer = new Image();
// attaching the seconds breaks cache
buffer.src = cam_image + '?' + (new Date()).getTime();
buffer.onload = function() {
setTimeout(preload, 30000); // 30 seconds refresh
document.getElementById('myimg').src = buffer.src;
}
}
preload();
</script>
If you are working with a static group of pictures - you already know the filenames and it's not going to change - you would load everything into your html initially (that solves the blank screen concern), then use a jquery plugin to rotate/refresh the images at the interval you specify, be it 30 seconds or whatever.
So, your html would look something like this:
<ul>
<li><img src="[camera ip]/jpg/1/image.jpg"></li>
<li><img src="[camera ip]/jpg/2/image.jpg"></li>
<li><img src="[camera ip]/jpg/3/image.jpg"></li>
...
</ul>
And then the plugin would cycle through them.
For plugins, use one of these two:
http://nivo.dev7studios.com/
http://jquery.malsup.com/cycle/
Good luck!
Related
previosly my client hadan swf for their logo, this doesn't show well needless to say. i have made a single loop gif for the customer's animated logo. i want it to play once per page load. it currently plays once ever(if at all)
the web page is on a .net server, so i can't implement php code.
i tried a javascript cachebuster:
<img id="gif_animata" src="images/fca-1.gif" width="550" height="50">
<script type="text/javascript">
var gifSource = $('#gif_animata').attr('src'); //get the source in the var
$('#gif_animata').attr('src', ""); //erase the source
$('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-)
</script>
...i would comment on the question sourced, but i can't comment yet
anyway, it didn't do anything for me. the image name still shows as "fca-1.gif" no change to the name when i load the page, and i can see the javascript when inspecting the source
try simply this code
setTimeout(function() {
setInterval(function() {
$('#gif_animata').attr('src',$('#gif_animata').attr('src'))
},1)
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="gif_animata" src="http://www.lmpenterprises.co.uk/ekmps/shops/pearl/resources/image/animated-gif-2-f.gif" />
this code after 2 seconds set every 1 millisecond the source so it is always the first frame
Objective: I am making a stop animation with jquery and I need to load 47 images and put them as body background one after another at 450ms delay.
The part that I am having trouble with is that I can't get to cache/preload images correctly so that they switch without blinking etc...
I start the animation in $(window).load(function() {.... so everything should be loaded by then
I have tried a number of ways from stackoverflow and all over the web here are some of them:
NOTE: EVERYTHING WORKS LIKE A CHARM IN GOOGLE CHROME. FIREFOX IS PROBLEM! Site is hosted in wamp for now.
Jquery in document load: ( I have tried with plain javascript inserted in the <script></script> but no success
for (var x = 1; x < 47; x++)
{ preloaded[x] = new Image();
preloaded[x].src = 'anim_frame' + x + '.png';
}
} // later I modifed the code to preload sets of 5 images every 5 frames, so when frame 1 is shown frames 5-10 are loaded and so on...works great in chrome
Putting all the images in html directly as <img> tags...not working.
jQuery get to image location - not working
I know it can be done, this site made it, why cant we? ;) http://discover.store.sony.com/be-moved/
Only the following solution worked in all browsers.
Calling jQuery.get on all images in doc.ready and keeping a counter on how many images have loaded. Once they are loaded display the website...in the meanwhile show a nice loader with a percentage of the images loaded ;)
Refresh Image Src content and Stop the refreshing
Hi, i have a function that refresh the "src" attr every second. , now i want when i click button stop, it will stop the interval, in addtion, to make a button to take the picture and save it to computer, like snapshot.
<img src="http://someurl" id="image1" class="g" />
<button id="stop">STOP!</button>
<button id="capture">capture</button>
Example
you can see here what i wrote and give me directions , thanks.
Canvas2Image plugin might help you.
Using the HTML5 canvas element, you can create all sorts of cool graphics client-side on the fly using Javascript. However, the canvas image cannot (in all browsers) simply be saved to disk as any other image.
Luckily there is a neat function on the the canvas object called toDataURL(). This functions encodes the image data as a base64 encoded PNG file and returns it as a data: URI.
To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/
Also check out this question.
Edit:
Refreshing image is simple:
//Declare array of images
var images = ['http://www.creativereview.co.uk/images/uploads/2012/10/1_press_image_l_for_the_lol_of_cats_l_maru_0.jpg',
'http://blog.naseeb.com/wp-content/uploads/2010/12/cute-cat.jpg',
'http://www.helpinghomelesscats.com/images/cat1.jpg'];
var loop = 0;
//This function will refresh image on specified interval
function refreshImages() {
$('#myimage').attr('src', images[loop]);
loop++;
if (loop === images.length) {
loop = 0;
}
}
//Set Refresh time here
var setInt = self.setInterval(function() {
refreshImages();
}, 1000);
//This button stops the image refreshing
$('#stop').click(function() {
setInt = window.clearInterval(setInt);
});
//Add image capture code here
Working DEMO
I have a web page where lots of images called from server using image
scr attribute.
I have created a function like which is triggered by td click.
function GoToStep(stepNo) {
var imgSrc = $("#h1" + stepNo).val();
$(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}
Now the problem is this. For slower connections the images come after some
moment.
Can I pre load images to avoid waiting time when user clicks
td?
I have seen some jquery function to pre load images.
Kindly give some idea how can I achieve it.
Pre-loading an image is equivalent to loading an image but never displaying it. So, you can easily do it like this:
<img src="image.png" alt="" style="display:none;"/>
Now this image will be loaded as soon as the html starts rendering. Whenever you need to use this image as a display or background, just set the address to image.png and it will automatically be fetched from browser's cache.
This can be done using some javascript functions. Quoting from another question.
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Explanation of how javascript preloaders work (different question)
[...] The way it works is simply by creating a new Image object and setting
the src of it, the browser is going to go grab the image. We're not
adding this particular image to the browser, but when the time comes
to show the image in the page via whatever method we have setup, the
browser will already have it in its cache and will not go fetch it
again. [...]
So in your case, you should use something like
$(function() {
// Do stuff when DOM is ready
preload([
'img/bg1.jpg',
'img/bg2.jpg',
'img/bg3.jpg'
]);
});
I'm presenting a simple animation using img.src replace and the <canvas> tag. At present it's only expected to work in FireFox (FF 3.5.3, Mac OS X 10.5.5), so cross-browser compatibility isn't (yet) an issue.
When the page is first loaded, or loaded into an new window or tab, all seems to work as expected, and the cache behavior on a simple reload does not seem to be an issue; however, if I try to force a reload with shift-reload, I get a problem. Even though the images have been pre-loaded, the preloaded images for the animation don't seem to be available to the browser which then tries to load each new img.src from the server.
Am I looking at a browser bug here, or is there something buggy in my code that I can't see? This is my first shot at implementing a js class, so there might be a lot here that I don't understand.
Any insight from the assembled wise here would be welcome. You can see what I'm talking about at:
http://neolography.com/staging/mrfm/spin-sim.html
Thanks,
Jon
When you shift reload you're telling the browser to reload - not from the cache.
So it shouldn't be a surprise that you're getting the images from the server.
Images can be preloaded in javascript with the following code:
img = new Image();
img.src = "your/image/path";
If you want the images loaded before you use them that might help.
I had a look at your code and you have the following in document.ready()
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
}
}
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
the animation = new simAnim line is executed regardless if all 100 images are loaded or not...
One possibility to fix this would be to move that line inside the countLoadedImages function like so:
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
}
}
this way that function will be executed once all the images have loaded
Thanks to ekhaled, who tried. I'm now satisfied that this is a browser bug:
Mozilla bug #504184
I have a stripped down example at http://neolography.com/staging/shift-reload/shift-reload-testcase.html which I will leave up. I encourage all to vote for this bug in the mozilla bug tracker so that it will get fixed.
j