Image onLoad problem in IE

In IE it does not scale down huge images. In fact, it scales some but not all. I scale them down by setting small width and height attributes. How to fix it?

I do it as follows:

var $image = $('<img/>');
$image.attr('src', 'http://example.com/img.jpeg');
$image.load(function () {
  this.width = this.height = 100;
});

Something like that. But n开发者_高级运维ot all images get scaled down. And, every time I reload the page different images get scaled down.

I have found out what the matter is. Please refer to img onload doesn't work well in IE7

IE 6&7 only fire "load" if they actually have to get the image from the server -- they don't if the image is already in local cache., Jeremy Wadhams wrote.

If you define the width and height in the html element, this should work. In css, IE6 isn't standards compliant and results may vary.

For best practices, you shouldn't re-size images in the browser, it slows everything down and causes pixelation. Make a copy of the images that's the size you want, and then link these images to the full-size images, if that's appropriate.

Once you've done that, keep those images away from me, thankyouverymuch.

You shouldn't be having the browser scale down images anyways. For performance reasons, this is going to bog down your site for your users. If you are forcing your user's browser to scale down "huge" images, then they have to download said images fully first and then the browser can scale them, which slows down their workflow. It also costs you more bandwidth than using images of the correct size would.

You should be providing the images in the size that you want to display them to the user. If you need multiple sizes, then have multiple sizes of the images on your server. Hard drive space is cheap, definitely cheaper than bandwidth (both yours and your users').