Develop Reference

Onload doesn't fire on "new Image()", when src is ".js" file

Am i wrong in assuming, that this should work?
var i = new Image();
i.onload = function () {
alert('foo');
};
i.src = 'http://whatever.com/script.js';
This way onload event doesn't fire at all.
if i replace the last line with
i.src = 'http://somethingelse.com/image.png'
then it does. What could be the problem here? Does it only fire on image sources? What are the allowed content types then? Can't find any info on that.

That's because you're getting an error when you try to load a javascript file as an image, and the onerror event probably fires instead.
The onload event only fires when an image was successfully loaded.
I'm guessing you can pass in almost any URL, as long as it's a valid image that can be loaded !

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?

Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

determine whether body's background-image (css) has been loaded

Depending on some conditions, different background images are loaded:
$('body').css('background','url(image.png)');
Is there a way to determine whether the background image has loaded? I need to execute a function when the image has been loaded.

You could load the image into a hidden <img> tag and assign an onload handler to the tag. In the onload handler you could populate the background image of the body (which should happen more or less instantly because the image is now in the browser cache) and then run your custom code as well.
var hiddenImg = new Image();
hiddenImg.onload = function(){
$('body').css('background','url(' + this.src + ')');
your_custom_onload_code();
};
hiddenImg.src = 'image.png';

var img = new Image ();
img.onload = function () { $('body').css('background','url(image.png)'); };
img.src = src;

jQuery hide image, change contents, show image

I am looking for the CORRECT way to do the following:
$("#some-image").fadeOut();
$("#some-image").attr("src", "new-src.png");
$("#some-image").fadeIn();
For timing purposes, the following sets it up closer, but I know this is still incorrect:
$("#some-image").fadeOut(function(){
$(this).attr("src", "new-src.png").fadeIn();
});
What is the correct way to do the following, in order:
Fade Image Out
After Image has faded, load a new src
After new image has completely loaded, fade image back in
Cheers!

Your problem may be that the new image doesn't load until after the DOM element containing it has already faded in. Ensure the image has fully loaded before calling fadeIn():
$("#some-image").fadeOut(function(){
var tgt = $(this),
img = new Image,
src = "new-src.png";
img.onload = function() {
tgt.attr('src', src).fadeIn();
};
img.src = src;
});
Even better, load the image ahead of time:
<script>
// Outside of $(function() {})
function preload_img(src) {
var img = new Image;
img.src = src; // loads immediately, maybe even before DOMReady
}
</script>
Then you won't have to worry about whether or not the image has been loaded when the user triggers your fadeIn/Out.

Use a callback function. Once the fadeOut completes, we change the src and fade the imagein after the src has been changed.
$("#some-image").fadeOut(function(){
//after the fadeout completes, change the src of the image.
$(this).attr("src", "new-src.png").fadeIn();
});

JavaScript event for when image 'src' attribute is changed?

I have a function resizePreview() that will resize an image in a jQuery dialog box if the image is too big. This image can be changed by the user. My code goes something like this:
$('#imagePreview').attr('src', newImageSrc);
resizePreview();
resizePreview() uses $('#imagePreview').width() and .height() to get the dimensions and resizes accordingly. The problem is that the new image isn't loaded by the time resizePreview() is called so the image is resized according to it's original dimensions, not according to the dimensions of the newly loaded image.
If I put an alert() call in between the two lines of code it works (since the alert gives the browser enough time to load the new image). Apparently I should use an event? Is there an existing event, or is there a way I can make one, for when the image src has changed (sort of like an onChange event, but for that attribute) or for when the new image has completed loading?

The load event works for Images:
$('img.userIcon').on('load', function () {
$(this).toggleClass( 'bigImg', $(this).height() > 100 );
});

Image objects allow attachment of onload event listeners:
var img = new Image;
img.onload = function () {
alert("Loaded");
};
img.src = "dummy-picture.png";