Member Avatar for Pro2000

Hello everybody,
I wrote a file using AJAX this is the code I wrote:

var http = createRequestObject();
function createRequestObject(){
    var request_;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        request_ = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        request_ = new XMLHttpRequest();
    }
    return request_;
}
function getInfo(){
    http.open('get', 'GtCht.php');
    http.onreadystatechange = handleInfo;
    http.send(null);
}
function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('ChtPlc').innerHTML= [B]document.getElementById('ChtPlc').innerHTML + response;[/B]
    }
}

I binded that file with a function in JavaScript:
<script language="javascript">
function GetINF(){
window.setTimeout(getInfo(),1000)
}
</script>
So when this file selects an animated image from the MySQL database it refreshes the image automaticially each 1 second, however I want this image to stay moving until its final frame.
Could you help please? :-/

  • 3 Contributors
  • 3 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Dani AI

Generated

The GIF keeps restarting because the page code is repeatedly recreating or resetting the image node on each poll. That makes the browser re-render the GIF from frame one every time. is polling the server every second; tried to fix the timer but the real problem is how the DOM is being updated (and the timer setup). asked for a sample page — inspecting one will quickly show whether each poll replaces existing markup or only adds new items.

Fixes to apply (practical, easy to test)

  • Do not replace the existing <img> element. Only append new messages/attachments with DOM methods so existing images are left alone. Use insertAdjacentHTML or create and appendChild so you are not reparsing the whole container (see MDN on insertAdjacentHTML).
  • Make polling safe: schedule the next request only after the previous request completes. A simple pattern is to call setTimeout from your success callback instead of calling the request function immediately. See MDN on setTimeout for the correct usage.

Example patterns (minimal)

/* schedule next poll after completion */
setTimeout(poll, 1000);
/* append HTML without re-parsing entire container */
container.insertAdjacentHTML('beforeend', response);

Extra tips

  • Preload images with new Image().src = url before inserting them to avoid flicker.
  • If you must detect “animation finished,” browsers offer no GIF-finished event. Convert the animation to a video (you can use the ended event) or render frames into a canvas and control playback. See MDN on the ended event for media elements.
  • Use DevTools Network to confirm your code isn’t re-sending HTML that replaces prior content and confirm 200 responses.

References: setTimeout, insertAdjacentHTML, HTMLMediaElement ended.

Recommended Answers

All 3 Replies

Member Avatar for hielo

My comments are in the code:

var frame=0;
var interval=null;
var http = createRequestObject();
function createRequestObject(){
    var request_=null;

    //not necessary
    //var browser = navigator.appName;
	if(window.XMLHttpRequest)
	{
	request_ = new XMLHttpRequest();
	}
    else if(window.ActiveXObject){
        request_ = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request_;
}
function getInfo(){
	if( http )
	{
		//first parameter MUST BE UPPERCASE
		http.open('GET', 'GtCht.php');
		http.onreadystatechange = handleInfo;
		http.send(null);
		++frame;
		if(frame < 24 )
		{
			clearInterval(interval);
		}
    }
    else
    {
    	alert("Your browser does not support AJAX.");
    }
}
function handleInfo(){
	//must make sure you optained the resource successfully
    if(http.readyState == 4 && http.status==200){
        var response = http.responseText;
        document.getElementById('ChtPlc').innerHTML= document.getElementById('ChtPlc').innerHTML + response;
    }
}

function GetINF(){
 interval = setInterval(getInfo(),1000)
}
Member Avatar for Pro2000

Thanks but that does not help...
I want to keep the images (.GIF) moving until it completes.
However my file does not do that...
the page auto-refreshes...
Can you solve it?

Member Avatar for ~s.o.s~

Can you link us to a sample page so we can find out what *exactly* are you trying to do?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.