0

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 not 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.

Community
  • 1
  • 1
Domspan
  • 153
  • 1
  • 7
  • 1
    Please show examples and define "properly". Show some code. – Pekka Feb 09 '11 at 14:51
  • 4
    I cannot show you the images because I am naked there. – Domspan Feb 09 '11 at 14:55
  • Something wrong with jQuery's load method in IE? I use it to dynamically scale down images. Works well in browsers other than IE. – Domspan Feb 09 '11 at 15:04
  • Can that be caused because the onLoad method of the image only fires if the image has not already finished loading at the time of the event binding. Read it at http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm – Domspan Feb 09 '11 at 15:10
  • @Goreed Shouldn't be. Maybe some images aren't completely loading in IE? You shouldn't need to wait for the image to finish loading to set the width and height; what happens if you just do something like `$('img').attr({'height' : '100', 'width' : '100' });` ? Also, is there a reason why you're using ''? I'm wondering if that could be having some influence. If I wanted to target specific images using jQuery, I'd give those images a class and then look for that, e.g. `` selected by `$('img.naked')`... – Matt Gibson Feb 09 '11 at 15:25
  • Matt, I forgot to mention in the code that I also preserve aspect ratio when scaling down. So, I need to know the original dimensions. – Domspan Feb 09 '11 at 15:28
  • 2
    @Goreed Ah -- so the code we're debugging isn't the code that's not working, then? – Matt Gibson Feb 09 '11 at 15:35

2 Answers2

2

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.

daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
0

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').

Charles Boyung
  • 2,464
  • 1
  • 21
  • 31