We Keep Coding

Javascript: Possible to get image dimensions before images are fully loaded?

I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.
The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.
What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.
I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load-- before the images fully have loaded.
Thanks!
*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)

This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.
Otherwise you're in a chicken-and-egg situation; you can't magically find the size of the image; you need to download it first!

Shrink dimensions of gif as part of animation

Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.

Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.

As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...

Stop GIFs from Preloading

I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks

Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});

You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.

You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.

Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.

Is there a way to use JavaScript to crop & resize an image before displaying it?

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...
Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?
Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..

You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.
However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.
Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.

Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/

JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.
But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.

Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.

preloading images with jquery - does the image stay in cache?

so I have a general question about preloading. I am using a few large images as sprites to be appended in various places throughout my mobile site, but because they are background images (assigned on the fly when jquery assigns certain class names to divs) - I'm not sure how best to preload these.
I saw this post here:
http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
where you simply do this:
var image1 = $('<img />').attr('src', 'imageURL.jpg');
but if I preload images in this manner, and then never directly assign them to a dom element (because they will be assigned as a background image with a css class) - is preloading these images doing me any good?

It should still help as long as your script runs at the end and not in the middle of DOM rendering (As that'll block the page). You won't see the flickr effect when they get assigned.
The image will be picked up from the cache as long as the image URL doesn't change.