how refresh div containing image without reloading page?_问答_开发者

how refresh div containing image without reloading page?

开发者 https://www.devze.com 2023-03-07 15:46 出处：网络

相关专题：javascript php

I have project for my stud开发者_运维知识库y I read x,y from touch pad and draw it as real time drawing with php, I create draw page that take x,y and draw it on an image, another page display this image (inside div) it must be displayed many time in second I try to use ajax but it dose not work on the image unless I refresh the page manually then I use this but this way is not acceptable by my supervisor!!! please I need any helpful idea to refresh the div that contain the image from the code

You need to refresh the div while it contains the same image? Is that because the image itself changes (is rendered each time on request)? If so, you're browser cache is probably your problem. You can set the img src url to the base img url and add a parameter, like yourimage.jpg?x, where x is a value you change each time. That way, you'll byass the browser cache.

You don't need Ajax to load images. You can just set the img src or a div background-image to do that. The browser will automatically load it.

I doubt however if you can do this so many times a second.

Sounds like you're going about it the wrong way. You should be using a <canvas> element and drawing directly inside the client browser, rather than round-tripping everything through the server.

However, if you insist on the round trip, then have your AJAX "send the touch data to the server" routine wait until the server's confirmed that it's processed the touch data and generated a new image, then simply reload the image in your client.

If you want to refresh the div multiple times, u can use the basic js code...

example for 1 refresh

<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello");
}
</script>
</head>

<body>
<form>
<input type="button" value="Display alert box in 3 seconds"
onclick="timeMsg()" />
</form>
</body>
</html>

infinite loop::::

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>