tdhumal
asked on
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">');
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-
"<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">');
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
There's no major in the code. We just set a picture by default and onerror replace it with the default picture
There's no major change in the code.
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
ASKER
using document.write , I am trying to display image and if image is missing, i want to display "def.gif"
Did you try the code?
ASKER
for some reason, the default one is not displayed correctly. Any ideas??
you mean /dir/img/def.gif ?
Check the path
If you've a live link I can help more
Check the path
If you've a live link I can help more
ASKER
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">');
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">');
Check path of the picture
Give a live link if you need more help
Give a live link if you need more help
ASKER
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
All the gif files are in '/tsqStat/img/' folder
I never worked with live link. Can you explaing what do I have to do
I wan to your web site address :)
ASKER
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
No, the code work fine for me in a basic implementation
ASKER
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/DEFAUL T.gif';"/>
I will wait for few other responses.
Is it possibel to have something like as follows:
<img src="'/tsqStat/img/' + Qual + '.gif'" onerror="this.onerror=null
I will wait for few other responses.
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.getElementsByTagN ame("body" )[0].appen dChild(i);
}
</script>
</head><body>
</body></html>
no error :
confirm both example run fine for you
<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.getElementsByTagN
}
</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>
confirm both example run fine for you
ASKER
let me see your page or send me the url by email (go on my profile and choose hire me)
give me the url
Put this in your browser : http://localhost/tsqStat/img/DEFAULT.gif
ASKER
Let me put together somethiing for you and will send you as zipped file which you can try in your localhost
ASKER
I did put http://localhost/tsqStat/img/DEFAULT.gif in my browser and see the DEFAULT flag on the left corner
put an alert in the onerror to see if you get it :
img.onerror = function (evt) {
alert("ok")
this.src = '/tsqStat/img/DEFAULT.gif' ;
}
img.onerror = function (evt) {
alert("ok")
this.src = '/tsqStat/img/DEFAULT.gif'
}
ASKER
yes, I do see "ok" on alert window. i already tried it
Did you try this too ?
img.onerror = function (evt) {
this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
}
ASKER
yes, I just tried it now and it doesn't seem to be working
ASKER
on the html side I have following which is working for DEFAULT.gif
<img src="/tsqStat/img/{QUALIFI ER}.gif" onerror="this.onerror=null ;this.src= '/tsqStat/ img/DEFAUL T.gif';"/>
I think we are missing something for javascript
your thoughts??
<img src="/tsqStat/img/{QUALIFI
I think we are missing something for javascript
your thoughts??
both onerror are set ? I mean on in javascript one in the tag ?
ASKER
I did not get it what do mean by "both onerror are set".
You have :
img.onerror = function (evt) {
this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
}
and :
<img src="/tsqStat/img/{QUALIFI ER}.gif" onerror="this.onerror=null ;this.src= '/tsqStat/ img/DEFAUL T.gif';"/>
at the same time
img.onerror = function (evt) {
this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
}
and :
<img src="/tsqStat/img/{QUALIFI
at the same time
ASKER
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
ASKER
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
img.onerror = function (evt) {
this.src = 'http://localhost/tsqStat/img/DEFAULT.gif';
alert(this.src + " can't be loaded.");
}
message
ASKER
sorry , my bad. pl disregard my previous comment
ASKER
ASKER
I have fixed that problem.
Thanks for your help though. I am accepting your answer.
Thanks for your help though. I am accepting your answer.
ASKER
great job
ASKER