Fade in the image when it is loaded with AJAX request

[lauthiamkok]

I have this issue posted ealier to queue the AJAX request, and now I am facing another issue which is to fade in the image when it is called with AJAX, below is the code, please let me know if you know how to get around it. many thanks, Lau

this is the file calling AJAX (ajaxreq.php)
#################################
<script>
function getXMLHttpRequestObject()
{
// Initialize the object:
var req = false;
// Choose object type based upon what's supported:
if (window.XMLHttpRequest)
{
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
req = new window.XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// Create type Msxml2.XMLHTTP, if possible:
req = new window.ActiveXObject("Msxml2.XMLHTTP");
}
else
{
req = new window.ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}

function get(url, target)
{
var req = null;
req = getXMLHttpRequestObject();
if(req)
{//alert( startRow );
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
var result = document.getElementById(target);
result.innerHTML = req.responseText;
}
else
{
var loading = document.getElementById(target);
loading.innerHTML = 'loading';
}
}
req.open('get', url, true);
req.send(null);
}
else
{
alert('Request failed.');
}
}

function getlist()
{
var onLoadActions = new Array();
function addOnLoadAction(action)
{
onLoadActions[onLoadActions] = action;
}

function performOnLoadActions()
{
for (var count =0; count < onLoadActions.length; count++)
{
eval(onLoadActions[count]);
}
}
addOnLoadAction(get('bg.php','content1'));
addOnLoadAction(get('text1.php','content2'));
addOnLoadAction(get('text2.php','content3'));
}


<!--
document.write("<style type='text/css'>#bg {visibility:hidden;}</style>");

function initImage() {
imageId = 'bg';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999: opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
// -->

</script>



<a href="#" onClick="getlist(); return false;">Load</a>
<div id="content1">
</div>

<div id="content2">
</div>

<div id="content3">
</div>
#################################


This is the file containing the image (bg.html)
#################################
<div id="bg">
<img src="fullscreen.jpg">
</div>
#################################

[Snookerman]

opacity = (opacity == 100)?99.999pacity;

Wrap your code in code tags (button looks like this #) to avoid unwanted smileys and to make it a lot more readable.

[magicyte]

[SUGGESTION] Instead of this...

function getXMLHttpRequestObject()
{
// Initialize the object:
var req = false;
// Choose object type based upon what's supported:
if (window.XMLHttpRequest)
{
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
req = new window.XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// Create type Msxml2.XMLHTTP, if possible:
req = new window.ActiveXObject("Msxml2.XMLHTTP");
}
else
{
req = new window.ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}

... try this:

function getXMLHttpRequestObject()
{
    if(window.XMLHttpRequest) return new window.XMLHttpRequest(); // IE 7, Mozilla, Safari, Firefox, Opera, most browsers
    else if(window.ActiveXObject) return new window.ActiveXObject("Msxml2.XMLHTTP"); // Create type Msxml2.XMLHTTP, if possible
    else return new window.ActiveXObject("Microsoft.XMLHTTP");
    return 0; // return 0 just in case none of the statements apply
}

The second version saves more memory (). Instead of this...

function get(url, target)
{
var req = null;
req = getXMLHttpRequestObject();
if(req)
{//alert( startRow );
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
var result = document.getElementById(target);
result.innerHTML = req.responseText;
}
else
{
var loading = document.getElementById(target);
loading.innerHTML = 'loading';
}
}
req.open('get', url, true);
req.send(null);
}
else
{
alert('Request failed.');
}
}

...try this:

function get(url, target)
{
    var req = getXMLHttpRequestObject();
    if(req)
    {
        // alert(startRow);
        req.onreadystatechange = function() {
            if(req.readyState == 4) document.getElementById(target).innerHTML = req.responseText;
            else document.getElementById(target).innerHTML = "loading";
        };
        req.open("get", url, true);
        req.send(null);
    }
    else alert("Request failed.");
}

I'm not sure if you would need 'req', but I'll include it just in case. Then there's this...

function getlist()
{
var onLoadActions = new Array();
function addOnLoadAction(action)
{
onLoadActions[onLoadActions] = action;
}

function performOnLoadActions()
{
for (var count =0; count < onLoadActions.length; count++)
{
eval(onLoadActions[count]);
}
}
addOnLoadAction(get('bg.php','content1'));
addOnLoadAction(get('text1.php','content2'));
addOnLoadAction(get('text2.php','content3'));
}

...to this:

function getlist()
{
    var onLoadActions = [];
    function addOnLoadAction(action)
    {
        onLoadActions[onLoadActions] = action;
    }

    function performOnLoadActions()
    {
        for (var count = 0; count < onLoadActions.length; count++) eval(onLoadActions[count]);
    }

    addOnLoadAction(get("bg.php","content1"));
    addOnLoadAction(get("text1.php","content2"));
    addOnLoadAction(get("text2.php","content3"));
}

[/SUGGESTION]

[lauthiamkok]

Thank you so much Christ for simplifying and debugging the code for me.

Now I now it has such a big different to write the code in

req = getXMLHttpRequestObject(); and var req = getXMLHttpRequestObject();

var onLoadActions = new Array(); and var onLoadActions = [];

I will need read some online documentations or forum to understand what the different between these code properly but thanks for pointing out.

Much appreciated!

Best,
Lau