Show noimage.gif for images with valid external website link which has missing image or no image

Example 1

In one of my project we should display images from other sites. We fetch all image url using xml from that other site and we maintain in our database. We need to display those images in our site. so when you give the image url it is like this

<img src='http://othersite.com/images/xyz989.jpg'>

and your site could be abc.com.

If there no image for a link then in our site the default no image is displayed by internet explorer where as firefox displays a blank transparent area. So when we are displaying images from other sites and if the image is not present or invalid then we need to find out the reason and accordingly we can display a custom no image graphics instead of leaving that image tag dirty.

For that i tried a script and here i have displayed.

function processwidth()
{
 
	ao = si.getElementsByTagName('img')
	str = ao.length				
	for(i=0;i<ao.length;i++)
	{
		if(ao[i].width=='' || ao[i].width==0 || ao[i].width < 50)
		{
			ao[i].src = 'images/no_img_p.gif';
			ao[i].style.width = ao[i].style.height = '100px'
			ao[i].style.display = 'inline'
		}
		else
		{
			ao[i].style.width = ao[i].style.height = '100px'
			ao[i].style.display = 'inline'
		}
	}
}

I call this funciton after a second delay below the images or after page load using jquery document ready.

The reason for checking greater than 50 is in internet explorer if there is no image then it displays a 50x50 red color x image where as in firefox it is just plain so the width is 0.

Example 2

Here i have checked another condition because some times the url is empty. you can just check for equal to if you have not used the <base tag. if you have used that tag then all empty src will have that string. if you have given <base href='http://sitename' /> then instead of empty src that string will be substituted. I have stored that string in a variable baseurl and i am replacing it with an empty string to check whether it is empty.

function processwidth()
{
	ao = document.getElementById('newret').getElementsByTagName('img')
	str = ao.length
 
	for(i=0;i<ao.length;i++)
	{
		if(ao[i].width=='' || ao[i].width==0 || ao[i].width < 50 || ao[i].src.replace(baseurl,'')=='')
		{
			ao[i].src = 'images/no_img_p.gif';
			ao[i].style.width = '80px'
			ao[i].style.display = 'inline'
		}
		else
		{
			if(ao[i].width>94)
			ao[i].style.width = '95px'
			ao[i].style.display = 'inline'
		}
	}
}
 
$(document).ready(function(){
	window.setTimeout('processwidth()',2000);
});

Example 3

In case if you had given value in alt then in internet explorer you will have to do an overhead. For empty image place holder in firefox the width is zero but in ie it is 50. but if you had give value in alt then according to the length of the string the image width in ie will differ so what i did was i removed the alt string and made it empty for w3c. If we are supposed to give an alt tag then we should include another method like onload to check whether there was an image which i have not yet included in the above example and i have to experiment it but no time for now. so i am giving a reminder for my self below that i have to test that.

Reminder

If string for alt is given the the above calculation will go wrong and i have to implement some more code to check that.