Javascript works in IE only after adding alert function

I am baffled!

I am working on a new website that is based on WordPress.
To view a PNG image I have added a small script that will show transparent image in IE:

var ie5 = document.all && document.getElementById;
var ns6 = document.getElementById && !document.all;
var arVersion = navigator.appVersion.split("MSIE");
var ieversion = parseFloat(arVersion[1]);

var pngImagesOver = new Array();
var pngImagesOut = new Array();
function pngImage(containerId, imagePath, width, height, alt) {
var container = document.getElementById(containerId);
if(container) {
var element;

if ((ieversion >= 5.5) && (ieversion < 7) && (document.body.filters)) {

element = document.createElement('SPAN');
element.id = containerId + 'Img';
element.style.display = 'block';
element.style.width = width;
element.style.height = height;
element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imagePath + "', sizingMethod='scale')";
}
else {
element = document.createElement('IMG');
element.id = containerId + 'Img';
element.src = imagePath;
element.alt = alt;
element.width = width;
element.height = height;
}
container.appendChild(element);
}
}

function pngImageBG(containerId, imagePath, width, height, alt) {
var container = document.getElementById(containerId);
if(container) {
if ((ieversion >= 5.5) && (ieversion < 7) && (document.body.filters)) {
container.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imagePath + "', sizingMethod='scale')";
}
else {
container.style.backgroundImage = 'url(' + imagePath + ')';
}
}
}

Code (markup):

This is the call for the function:

<div id="nefrit_image">
<script type="text/javascript">
pngImage('nefrit_image', '<?php bloginfo('stylesheet_directory'); ?>/images/nefrit_image.png', 162, 429, 'Nefrit El-Or');
</script>
</div>

Code (markup):

Here is the weird thing:
The IE browser recognize this script, or whatever other script, ONLY when I add a small, and can be even unrelated, alert box to the javascript page.
Why it happens?

Here is the page with the javascript:
nefritelor.morvimmer.com

Here is a page in the website that I added an alert box to the same function:
nefritelor.morvimmer.com/?cat=4


HELP????

Thanks
Mor

 

for me it works under IE6
may be it cached clientside? try to ctrl+F5

 

Thanks for the fast response.
Not working. Either on my PC at home or at work. Refreshed it multiply times, but still not working.
Did you viewed both pages that I mentioned?

 

yep but tehre are some images missed serverside
http://nefritelor.morvimmer.com/wp-content/themes/nefrit/images/long_blackbox_top.jpg
http://nefritelor.morvimmer.com/wp-content/themes/nefrit/images/long_blackbox_bottom.jpg
or may be server side error it returns 500 code

 

It's likely a timing issue, I've experienced similar situations with IE. With an alert() statement in there it has time to "catch up".

The function call is inline at the global scope, and tries to run immediately as soon as the code is encountered. Instead of doing it that way, try putting it in a setTimeout with a delay of 0ms, such as:

setTimeout("pngImage('nefrit_image', '<?php bloginfo('stylesheet_directory'); ?>/images/nefrit_image.png', 162, 429, 'Nefrit El-Or');", 0);

Code (markup):

In most cases this will resolve the problem, but I'm not sure if it will help your particular situation. As locdev pointed out, there are a couple of images which are returning a 500 internal server error.