Develop Reference

Gif loader while loading heavy png image

I load png image generated by server-side PHP script (chart) to the HTML IMG-element <img id="chart"> using following JS code:
$('#chart').attr('src', 'chart.php');
The PNG-image generation and downloading takes about 1 second, so I want to show gif loader while image is loading. How to implement this feature with JS?

For balance this is very simple to do in plain JS:
var preload = function(element, src) {
var img = new Image();
// Apply onload before applying src attribute to avoid IE prematurely firing
img.onload = function() {
// Replace #chart with image
element.parentNode.replaceChild(img, element);
};
img.src = src;
}
preload(document.getElementById('chart'), 'chart.php?_...');

$('#chart').attr('src', 'chart.php').load(function(){
//something
});

In case the browser caches it, you may way to add something to the query string to break that. Either way, you need to listen for the image's load event, which should be bound before setting its src (in case it's cached):
var target_url = 'chart.php?_=' + (new Date()).getTime();
// Show "loading"
$('#chart').on("load", function () {
// Hide "loading"
}).attr('src', target_url);
Reference:
http://api.jquery.com/load-event/
Note the caveats near the bottom of that reference, referring to the event when working with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

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

How to get the true image height using JQuery?

I want to load html , and then get the true image height.
$("#cover").html(stuff); //this has the image inside it
$(function(){
console.log($("#cover img").height()); //sometimes it's 0
});
For some reason, height is sometimes 0. Could it be because the image hasn't been fully loaded yet, and JQuery sees it as 0? If so, how do I overcome this? Is there a callback or something when the image is loaded?

You can use the .load() method of jQuery
$('#cover').html(stuff);
$('#cover img').load(function () {
console.log($(this).height());
};

Why do the console.log inside an anonymous function? Have you tried this?
$("#cover").html(stuff); //this has the image inside it
console.log($("#cover img").height());

//locate the image(s)
$("#cover img").each(function(){
//Build a new Image Object outside the DOM
//that way, CSS won't affect it
var img = new Image();
//add a callback when loaded
img.onload = function(){
//your width and height
//img.width
//img.height
}
//use the image src to load
//use attr() to resolve path issues across browsers
img.src = $(this).attr('src');
});

try to using load method method that we can take advantage of to make this work the way we want it too.
The problem we have right now is that, in the Webkit browsers, the jQuery code runs when the DOM is ready and the DOM is ready before the image has been loaded. So the code runs but since there’s no image to get a width of, we get 0 for the image’s width. We can use the load method to make the code wait until the window has loaded entirely before it runs.
$(window).load(function() {
console.log($("#cover img").height());
});

try using attr() to get the height:-
$("#yourElemengtID").attr('height')

Here is a piece of small code i used before hope this will help you
On my displayed image when mouse is in call this function
function MouseIn()
{
var src;
//to get original image size
var img =$(this);// displayed image
var theImage = new Image();// create a cache image
var imgsource =img.attr("src");// take the src of displayed image
theImage.src = imgsource;// give cached image the source of displayed image
var original_height = theImage.height// take height of image from the source
var original_width = theImage.width;//take width of image from the source
// to get the displayed image size
var Image_displaysize_width= img.width();
var Image_displaysize_height= img.height();
}

Don't you mean to do something like this?
jQuery("#myImg")[0].naturalHeight
better still don't use overhead of jQuery when possible.
document.getElementById('myImg').naturalHeight

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();
});

Preloading image gracefully in Javascript (without any JS library)?

I have an image with set src attribute.
I would like to replace image, but connection with the server is slow and time that it takes to load a new image is not negligible.
Is there possibility to create internal Image object, set kind of "onLoadListener" on it, load an image and then set it to original image src attribute?

You can pre-load images in JavaScript like this...
myImage = new Image();
myImage.onload = function () { alert("Loaded"); };
myImage.src = "logo.gif";
You can put the logic to pop the image on the page instead of alert-ing.