No height and width of images in IE during page load

Question

jQuery(window).load(function() {
    jQuery.each(jQuery(".extraimgs"), function() {
        //this.height = 0 and this.width=0 in IE only
        if (this.height > this.width) {
            if (this.height > 263) {
                this.height = 263;
            }
            if (this.width > 354) {
                this.width = 354;
            }
        }
        else {
            this.height = 263;
            this.width = 354;
        }
    });
});

HTML Code

<asp:DataList runat="server" ID="dlImages" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table" OnItemDataBound="dlImages_ItemDataBound" Style="display: none;">
    <ItemTemplate>
        <div>
            <asp:Image runat="server" ID="imgPics" class="extraimgs" />
        </div>
    </ItemTemplate>                                 
</asp:DataList>

I have problem with this code in IE. Here I am setting the height and width of images during runtime (page load event - using jQuery) and source of images using code-behind.

This code works well in all browsers except IE8. In page load event, I get the height and width of the images, but I don't get the height and width of images in IE8. I tried a lot to get height and width of images during load event, but it does not work.

Does anyone know a solution?

Have you tried with `$(this).height()` and `$(this).width()`? That should work OK. — ubik, May 17 '12 at 07:21
yes..i tried with it.but it does not work.i got 0(zero) as height and width — ravidev, May 17 '12 at 07:23
It would be nice having a jsfiddle to play with this. You can also try doing `jQuery(".extraimgs").load(function() { /* ... */})` instead, as maybe the images haven't yet been loaded at the time that code is executed. — ubik, May 17 '12 at 07:28
I'd have a read of [this](http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome) and also [this](http://www.jnorton.co.uk/blog/jquery-load-vs-ready) — billyonecan, May 17 '12 at 07:49

score 1 · Answer 1 · answered May 17 '12 at 08:11

OK, here's a version that should work, as per my comment above:

jQuery(function() {
    jQuery(".extraimgs").load(function() {
        var $this = $(this);
        if ($this.height > $this.width) {
            if ($this.height > 263) {
                $this.height = 263;
            }
            if ($this.width > 354) {
                $this.width = 354;
            }
        }
        else {
            $this.height = 263;
            $this.width = 354;
        }
    });
});

score 0 · Answer 2 · answered May 17 '12 at 07:47

0

try this :

jQuery(document.body).load(function () {
      jQuery(".extraimgs").each(function (i) {
        if (this.height > this.width) {
            if (this.height > 263) {
                this.height = 263;
            }
            if (this.width > 354) {
                this.width = 354;
            }
        }
        else {
            this.height = 263;
            this.width = 354;
        }
      });
    });

answered May 17 '12 at 07:47

Rohit

165
4

It's not working..here i don't get height and width using this – ravidev May 18 '12 at 06:28

score -1 · Answer 3 · edited Jul 15 '12 at 13:05

-1

what about $(document).load() or $(document).ready() instead of $(window).load()?

edited Jul 15 '12 at 13:05

ndeverge

21,378
4
56
85

answered May 17 '12 at 07:31

11684

7,356
12
48
71

Indeed, I hadn't noticed OP was using `.load()`. – ubik May 17 '12 at 07:38

No height and width of images in IE during page load

3 Answers3