image load check not working

Hi Everyone,

I need help with my code. I am trying to display the image based on if it is available or not.
In my javascript function, It always displays def.gif image but no flag.gif image.
Do i have to do different to check the image load?

I want to display in IE 8 browser.

Thanks,
tdhumal

Here is my code:

My xslt code where the arguments are passed.
*********************************************************************
<xsl:for-each select="TEST/RECORD/OUTPUT">
              <xsl:sort select="REC" data-type="number" order="descending"/>
              <xsl:sort select="FLAG" data-type="text" order="ascending"/>
              <script type="text/javascript">
                WriteOutFiles("<xsl:value-of select="REC"/>",
                             "<xsl:value-of select="RECSEL"/>",
                             "<xsl:value-of select="RECBY"/>",
                             "<xsl:value-of select="RECWR"/>",
                             "<xsl:value-of select="FILEN"/>",
                             "<xsl:value-of select="FLAG"/>")
              </script>
            </xsl:for-each>
*******************************************************************

My Javascript where I am trying to display "FLAG"

*******************************************************************
function WriteOutFiles(rec, recSel, recB, recW, out, Flag)
{
        var outAry;
       var checkImg = null;
      var imgsrc = '/dir/img/' + Flag + '.gif';
      var img = new Image();
      img.onload = function (evt) {
            checkImg = true;
        }
      img.onerror = function (evt) {
            checkImg = false;
        }
        img.src = imgsrc;
      var out = 'output' + parseInt(outAry);
      document.write('<table width="876" border="0" cellpadding="0" cellspacing="1" class="tablesorter" id="' + out + '">');
              document.write('<thead>');
                document.write('<tr>');
                  document.write('<th width="57" scope="col">');
                 if(checkImg == true)
                  document.write('<img src="/dir/img/' + Flag + '.gif">');
                  else if(checkImg == null)
                  document.write('<img src="/dir/img/def.gif">');

tdhumalAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Check this :


function WriteOutFiles(rec, recSel, recB, recW, out, Flag)
{
	var outAry;
	var checkImg = null;
	var imgsrc = '/dir/img/' + Flag + '.gif';
	var img = new Image();
	
	img.onerror = function (evt) {
		this.src = '/dir/img/def.gif';
	}

	img.src = imgsrc;
	var out = 'output' + parseInt(outAry);
	document.write('<table width="876" border="0" cellpadding="0" cellspacing="1" class="tablesorter" id="' + out + '">');
	document.write('<thead>');
	document.write('<tr>');
	document.write('<th width="57" scope="col"><img src="/dir/img/' + Flag + '.gif">');

Open in new window

0
 
tdhumalAuthor Commented:
Thanks for your quick response. how do you put it inside document.write.
0
 
leakim971PluritechnicianCommented:
As you did it previously
There's no major in the code. We just set a picture by default and onerror replace it with the default picture
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
leakim971PluritechnicianCommented:
There's no major change in the code.
0
 
leakim971PluritechnicianCommented:
There's no major change in the code. We just set the right picture by default and onerror we replace it with the default one : /dir/img/def.gif
0
 
tdhumalAuthor Commented:
using document.write , I am trying to display image and if image is missing, i want to display "def.gif"

0
 
leakim971PluritechnicianCommented:
Did you try the code?
0
 
tdhumalAuthor Commented:
for some reason, the default one is not displayed correctly. Any ideas??
0
 
leakim971PluritechnicianCommented:
you mean /dir/img/def.gif ?

Check the path
If you've a live link I can help more
0
 
tdhumalAuthor Commented:
Yes, I did try the code

here is latest after changing as per your suggestion

function WriteOutFiles(recPro, recSel, recByp, recWritten, outFile, Qual)
{
      var imgsrc = '/tsqStat/img/' + Qual + '.gif';
      var img = new Image();
      img.onerror = function (evt) {
            this.src = '/tsqStat/img/DEFAULT.gif';
      }
        img.src = imgsrc;
      var out = 'output' + parseInt(outAry);
      document.write('<table width="876" border="0" cellpadding="0" cellspacing="1" class="tablesorter" id="' + out + '">');
              document.write('<thead>');
                document.write('<tr>');
                  document.write('<th width="57" scope="col"><img src="/tsqStat/img/' + Qual + '.gif">');
0
 
leakim971PluritechnicianCommented:
Check path of the picture
Give a live link if you need more help
0
 
tdhumalAuthor Commented:
The path is correct as you can see from the code I posted.
All the gif files are in '/tsqStat/img/' folder
I never worked with live link. Can you explaing what do I have to do
0
 
leakim971PluritechnicianCommented:
I wan to your web site address :)
0
 
tdhumalAuthor Commented:
I am not sure if I can do it. But dod you have any other option as why the DEFAULT.gif is not being displayed . Thanks
0
 
leakim971PluritechnicianCommented:
No, the code work fine for me in a basic implementation
0
 
tdhumalAuthor Commented:
Your suggestion is working perfectly fine except the DEFAULT.gif.
Is it possibel to have something like as follows:
<img src="'/tsqStat/img/' + Qual + '.gif'" onerror="this.onerror=null;this.src='/tsqStat/img/DEFAULT.gif';"/>
I will wait for few other responses.
0
 
leakim971PluritechnicianCommented:
error :
<html><head>
<script>
      window.onload = function() {
            var i = new Image();
            i.onerror = function(evt) {
                  this.src = 'http://walls.themespsp.fr/wp-content/uploads/2011/02/Rango_21.jpg'
            }
            i.src = "gateau.jpg";
            document.getElementsByTagName("body")[0].appendChild(i);
      }
</script>
</head><body>
</body></html>


no error :
<html><head>
<script>
	window.onload = function() {
		var i = new Image();
		i.onerror = function(evt) {
			this.src = 'http://walls.themespsp.fr/wp-content/uploads/2011/02/Rango_21.jpg'
		}
		i.src = "http://ww1.prweb.com/prfiles/2010/09/09/3743574/EElogoblack.jpg";
		document.getElementsByTagName("body")[0].appendChild(i);
	}
</script>
</head><body>
</body></html>

Open in new window


confirm both example run fine for you
0
 
tdhumalAuthor Commented:
They both run fine for me.

Here is what I see in my display for DEFAULT.gif. I have attached the file

 display error
0
 
leakim971PluritechnicianCommented:
let me see your page or send me the url by email (go on my profile and choose hire me)
0
 
leakim971PluritechnicianCommented:
give me the url
0
 
leakim971PluritechnicianCommented:
Put this in your browser : http://localhost/tsqStat/img/DEFAULT.gif
0
 
tdhumalAuthor Commented:
Let me put together somethiing for you and will send you as zipped file which you can try in your localhost
0
 
tdhumalAuthor Commented:
I did put http://localhost/tsqStat/img/DEFAULT.gif in my browser and see the DEFAULT flag on the left corner
0
 
leakim971PluritechnicianCommented:
put an alert in the onerror to see if you get it :

      img.onerror = function (evt) {
alert("ok")
            this.src = '/tsqStat/img/DEFAULT.gif';
      }
0
 
tdhumalAuthor Commented:
yes, I do see "ok" on alert window. i already tried it
0
 
leakim971PluritechnicianCommented:
Did you try this too ?

      img.onerror = function (evt) {
            this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
      }

Open in new window

0
 
tdhumalAuthor Commented:
yes, I just tried it now and it doesn't seem to be working
0
 
tdhumalAuthor Commented:
on the html side I have following which is working for DEFAULT.gif
<img src="/tsqStat/img/{QUALIFIER}.gif" onerror="this.onerror=null;this.src='/tsqStat/img/DEFAULT.gif';"/>

I think we are missing something for javascript

your thoughts??

0
 
leakim971PluritechnicianCommented:
both onerror are set ? I mean on in javascript one in the tag ?
0
 
tdhumalAuthor Commented:
I did not get it what do mean by "both onerror are set".
0
 
leakim971PluritechnicianCommented:
You have :

      img.onerror = function (evt) {
            this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
      }

and :

<img src="/tsqStat/img/{QUALIFIER}.gif" onerror="this.onerror=null;this.src='/tsqStat/img/DEFAULT.gif';"/>

at the same time
0
 
tdhumalAuthor Commented:
one is in xslt code  and one in javascript and they both get called at the same time. One(xslt) for graph display and other(javascript) for detail display which is not working
0
 
tdhumalAuthor Commented:
I tried following and got this message
img.onerror = function (evt) {
            this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
            alert(this.src + " can't be loaded.");
      }

message

 alert error msg box
0
 
tdhumalAuthor Commented:
sorry , my bad. pl disregard my previous comment
0
 
tdhumalAuthor Commented:
just trying different things here
img.onerror = function (evt) {
            this.src = 'DEFAULT.gif';
      }

got this message err msg
0
 
tdhumalAuthor Commented:
I have fixed that problem.
Thanks for your help though. I am accepting your answer.
0
 
tdhumalAuthor Commented:
great job
0
All Courses

From novice to tech pro — start learning today.