I'm trying to change an image in JavaScript+Prototype by changing the "src" attribute of the element. It works fine in IE, but not in Firefox. I don't get any errors and the script continues executing after this bit executes:
var image = $('toggle');
image.setAttribute("src", "../images/icons/icon_minus.gif");
image.setAttribute("alt", "Minus Symbol");
image.setAttribute("title", "Collapse tree");
What am I doing wrong? How do I make the browser replace the existing image "icon_plus.gif" with "icon_minus.gif"? I'm sure it must be something really obvious but I can't figure out what!
Thanks
Cant figure out what is wrong, but I believe its possible to do a:
image.src = "../images/icons/icon_minus.gif";
BTW, is the image path absolutely correct?
This function works fine in all browsers(chrome,Firefox,IE,Edge,...):
function recaptcha() {
$("#captcha-img").attr('src', "");
setTimeout(function(){
$("#captcha-img").attr('src', "captcha?"+new Date().getTime());
}, 0);
}
The important point is generating new URL which forces FF and IE to re-render the image.
Related
I have a slide show that has been working for a long time. I am updating the site to XHTML transitional, and now the slide show is not working in IE 9.
It seems the problem is that the "complete" function is not working. The following code gets the slide show started (this is called after the page loads):
function Initialize() {
document.images["carImg"].src = imgList[0];
if (document.getElementById) {
theLink = document.getElementById("linkTo");
theLink.href = imgURL[0];
}
if (document.images["carImg"].complete) SetTheInterval();
else setTimeout("Initialize()", 1000);
}
document.images["carImg"].complete always resolves to false, and so it calls Initialize every second. The image imgList[0] is loaded, because it is showing up. But the complete property is not being set.
If I comment out the if (document.images["carImg"].complete) conditional, and just call SetTheInterval(), the slide show works.
It also works in Firefox (with the conditional). It also works if I set IE 9 to "compatibility view" (though then other things look weird).
Does anyone know why the "complete" property is not getting set in IE 9? Has something changed?
UPDATE: It seems complete is only not working on the first image. For subsequent images, complete is set when the image is loaded.
Try seeing if there is an onload or an error event, it may be that even resetting the src makes a 'dirty' image that is not instantly complete, even if the image exists.
I hadn't noticed this before, but in IE10 (don't have 9) you need the onload event.
When the onload fires, complete is true, but as soon as you write to the img src it is false again. You could also set the src just once, and just check complete in the timeout.
And without the onload handler, even after the image appears, the timer goes on forever...
window.ready=function(){
var img= document.images[0];
img.onload= function(){
clearTimeout(ready.timer);
alert('onload called, img.complete= '+img.complete);
};
// temporary error handler, if needed
img.onerror=function(e){
clearTimeout(ready.timer);
alert('Error!\n'+e.message || e);
};
// set the new src
img.src= Memry.Rte+'art/sundrag.gif';
if(!img.complete) ready.timer=setTimeout(window.ready, 300);
else alert('complete');
}
ready()
I'm not sure this is the best answer, but time is a-wasting and it works.
The problem was, I had set the initial src for the image tag to spacer.gif (in HTML). Thus the complete property for the image was true when the Initialize routine was executed.
However, when I reset the src property -- in javascript -- to the first image in the image list, the complete property became false. I am not sure why. Subsequent to that, changing the src property to another image in the image list did set the complete property to true.
It was this way in both IE9 and Chrome, but not in Firefox. Go figure. So instead of setting the src of the image to spacer.gif, I read the javascript file containing the list of image names in the code-behind (C#) and set the initial src property of the image tag to the first image. Now it works.
FWIW, I did try using onerror in the image tag, but no error came up.
Sheesh. I am not fond of javascript.
I am simply trying to change the SRC attribute of an image via javascript like so:
document.getElementById('fooImage').src = img;
Where img is a variable that has a link to the file.
In all other browsers (Chrome, Firefox, Safari) this works. In IE (7+) this also works too sometimes.
Using IE's built-in developer tools, I can see that the image's SRC tag is set. Is there something else in the locals window that could help me debug why the image doesn't actually show on screen?
I've also tried using jQuery to do this and same outcome:
$("#fooImage").attr("src", img);
An ideas?
In debugging this I would hard code it first...
document.getElementById('fooImage').src = "myimage.png";
I've used the following in my website and it works like this...
var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/1.png";
Some other things to check:
Make sure your ID= tag is not in the <DIV section but inside the <IMG section... for example <div class="style1"><img src="yourpicture" id="someid">. If `id='someid' is in the div tag then you can't change the picture / the picture won't show up.
are you using window.onload?, body onload? the proper way to use the first is..
window.onload = function () { YourFunctionHere(); };
Try a different test image. I had issues in the past with showing png's, I changed it to a gif or jpg and it worked. I don't understand how that was "way back" but it doesn't seem to be an issue anymore but hey... something to try.
try a full url
using https?
try sticking the image somewhere else in your program and see what happens.
try adding this to your HTML (put your website in place of mine - lookup BASE href on google for more info)
<BASE href="http://perrycs/" />
Make sure the image isn't hidden behind a layer (I know it works in some browsers)
tell us the website so we can check it out and get more info to help you in debugging this, seeing context (surrounding code) helps...
Given that it works in other browsers, searching on this topic it seems that often the problem is how IE caches images (ref. Epascarello's comment). Your code is the same as what I have - it works fine except in IE10.
I too, faced this conundrum. Then discovered that it works in 'Page Inspector', so after some digging discovered that (in Internet Explorer) by going to Tools.Internet Options.Advanced
uncheck the 'Disable script debugging (Internet Explorer)' and the one below it.
I found that with IE9 after changing an image.src with
var strVar="C:Users/x/Desktop/caution.png"
image.src=strVar
and calling an alert(image.src) I would get something like this n the alertbox:
file:///C:Users/x/Desktop/"C:Users/x/Desktop/caution.png"
So I tried
image.src=strVar.replace(/\"/g,"")
to remove qoutemarks
and it worked!
alert(image.src)
file:///C:Users/x/Desktop/caution.png
is anybody familiar with greyBox JavaScript plugin?
orangoo.com/labs/GreyBox/
it's for slideshows and stuff.. I can't get it to work in FF/Safari; it works great in IE, but FF/Safari won't play ball..
orensanz.org/photos.html
would very much appreciate some suggestions..
supposedly there's a google group (forum) for this thing (can't post url.. this thing limits how many urls u can include in a post, it's linked to from their home pg (url above.. oh brother..) but when you link to it you land on a pg that says they've been booted out b/c they violated google's terms of service....;-)
thank you..
It looks to me as if there's a race condition in some of that Javascript code. If the image isn't in cache, then this looks to me like it'll never make the image box visible:
if(gb_type == "image") {
if(img_holder.width != 0 && img_holder.height != 0) {
var width = img_holder.width;
var height = img_holder.height;
GB.width = width;
GB.height = height;
setupOuterGB();
if(GB.use_fx) {
AJS.setOpacity(frame, 0);
AJS.fx.fadeIn(frame);
}
}
}
else {
GB.width = frame.offsetWidth;
GB.height = frame.offsetHeight;
setupOuterGB();
}
In think that code should be called as the "load" handler for the image. Note that your page works fine in Firefox the second time you click on any particular image.
if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
loaded();
});
}
else {
loaded();
}
Try putting these lines on either a timeout or replace the lower loaded() with AJS.AEV(window, 'load', function(e) {loaded();});
(I couldn't add comment, nothing happens when click on 'add comment'..)
yes I know I can use other lightboxes.. but what I do need is one in which slideshow lands in photo the user CLICKED.. at work I've been using this one, flowplayer.org/tools/demos/scrollable/easing.html, but when you tell it to start at a given photo (not photo 1) it SLIDES towards it.. I need one in which it just lands on specified photo without the sliding effect -- other than that this one would be perfect
a lot of slick JS lightboxes out there have 'next' button on top of photo itself and other stuff obstructing photo a bit, I don't want that.. ) oh man, I still can't get this thing to work AT ALL in Safari, whereas examples they have online (orangoo.com/labs/GreyBox/) work fine in Safari, I don't get this.. thank you for your help (btw: I tried many diff settings for setTimeout, all the way from 1000 milliseconds to about 30,000.. either way Safari won't touch it.. :-(
I have a Firefox 3.6.2 problem (3.5.x works just fine).
This is the code:
...
var newImage = new Image();
newImage.onload=function() {swapMapImg(newImage);};
newImage.src = newBackground;
...
function swapMapImg(newImage) {
alert('bingo');
}
Firefox 3.6.2 no longer fires off my onload event, any ideas?
I would personally start using jQuery if you can and use their onload functions. It should make life a LOT easier for you as someone else is maintaining and testing the code
Turns out the following code:
var currentBackground = tableElem.style.backgroundImage;
returns two different strings in 3.5.x and 3.6.x as shown below:
3.5.x --> url(http://localhost:8080/WellSeismicMap/......);
3.6.x --> url("http://localhost:8080/WellSeismicMap/......");
notice the quotation mark in char position 4 in the 3.6.x version well this was throwing my substr function out and generating an invalid url.
Thanks for your help anyway chaps!
I'm using Firefox 3.6.2 and your code works for me. Are you sure:
newImage.src = newBackground;
Is working? I mean, do you still see the image appear on the page? Because if the link's broken, onload isn't going to happen.
I'm presenting a simple animation using img.src replace and the <canvas> tag. At present it's only expected to work in FireFox (FF 3.5.3, Mac OS X 10.5.5), so cross-browser compatibility isn't (yet) an issue.
When the page is first loaded, or loaded into an new window or tab, all seems to work as expected, and the cache behavior on a simple reload does not seem to be an issue; however, if I try to force a reload with shift-reload, I get a problem. Even though the images have been pre-loaded, the preloaded images for the animation don't seem to be available to the browser which then tries to load each new img.src from the server.
Am I looking at a browser bug here, or is there something buggy in my code that I can't see? This is my first shot at implementing a js class, so there might be a lot here that I don't understand.
Any insight from the assembled wise here would be welcome. You can see what I'm talking about at:
http://neolography.com/staging/mrfm/spin-sim.html
Thanks,
Jon
When you shift reload you're telling the browser to reload - not from the cache.
So it shouldn't be a surprise that you're getting the images from the server.
Images can be preloaded in javascript with the following code:
img = new Image();
img.src = "your/image/path";
If you want the images loaded before you use them that might help.
I had a look at your code and you have the following in document.ready()
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
}
}
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
the animation = new simAnim line is executed regardless if all 100 images are loaded or not...
One possibility to fix this would be to move that line inside the countLoadedImages function like so:
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
}
}
this way that function will be executed once all the images have loaded
Thanks to ekhaled, who tried. I'm now satisfied that this is a browser bug:
Mozilla bug #504184
I have a stripped down example at http://neolography.com/staging/shift-reload/shift-reload-testcase.html which I will leave up. I encourage all to vote for this bug in the mozilla bug tracker so that it will get fixed.
j