jquery image width and height not working on IE

Question

<script type="text/javascript">
     $(document).ready(function () {

         $("#aspnetForm img").load(function () {
             $(this).width(64);
             $(this).height(64);
         });
     });
</script>

 <asp:TemplateField>
                <ItemTemplate>
                <img alt="" runat="server" class="pic" style="cursor:pointer" src='<%# StripHTML(Eval("cat_img").ToString()) %>'  />
                </ItemTemplate>
                </asp:TemplateField>

It is working in Chrome, but not on IE. Please help me. My image is <p> <img src=....> html tag in database. I cleared striphtml method.

this links will help you http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — sasi, Feb 07 '13 at 11:29

kidwon · Answer 1 · 2013-02-07T11:25:31.463

0

Images aren't yet loaded on ready event use $(window).load() instead On ready only the DOM structure is loaded but not the real images. It's like you're having the img tag but not the file yet

OK your problem is totally different, you're looking for this, my mistake You just want to iterate some images and make them 64x64 that should work

$(document).ready(function () {
    $("#aspnetForm img").each(function () {
         $(this).width(64).height(64);
    });
});

or

$(document).ready(function () {
    $("#aspnetForm img").each(function () {
        $(this).css({width:64+'px',height:64+'px'});
    });
});

If you want to get the width of each image you should wait for the img to load

 $(window).load(function () {
     var width, height;
     $("#aspnetForm img").each(function () {
         width = $(this).width();
         height = $(this).height();
         //store the current img width or height or do whatever
     });
 });

edited Feb 07 '13 at 11:25

answered Feb 07 '13 at 11:06

kidwon

4,448
5
28
45

– david5 Feb 07 '13 at 11:07
`$(window).load()` instead of `$(document).ready()` or you can still put it inside `$(document).ready(function(){})` if some closure logic. Just make sure that the logic regarding images size is inside `$(window).load(function(){....})` – kidwon Feb 07 '13 at 11:09
replace documen.ready to window.load chore not working too..:( – david5 Feb 07 '13 at 11:14

score 0 · Accepted Answer · edited Jun 08 '13 at 21:30

0

Try this instead:

$(document).ready(function () {
    $("#form img").css({"height":"64px","width":"64px"});
});

The fiddle: http://jsfiddle.net/devWaleed/6eas3/4/

edited Jun 08 '13 at 21:30

Joe

15,205
8
49
56

answered Feb 07 '13 at 11:27

devWaleed

475
3
14

1

this should also work, but ".each()" method is slower, should avoid it if you can – evilReiko Feb 07 '13 at 11:31
or simply use a css no javascript ? :) – devWaleed Feb 07 '13 at 11:38

score 0 · Answer 3 · answered Feb 07 '13 at 11:27

0

Don't use .load(), it's deprecated.

Try this, should work for all browsers:

$(document).ready(function() {
    $('#aspnetForm img').css('width', '64px')
                        .css('height', '64px');
});

answered Feb 07 '13 at 11:27

evilReiko

19,501
24
86
102

They deprecated that ,too that is a surprise. OK luckily there's still `window.onload` – kidwon Feb 07 '13 at 11:39

coder · Answer 4 · 2013-02-07T11:49:57.797

0

Try with this:

Reference:http://api.jquery.com/load-event/

$(document).ready(function() {
    $("#aspnetForm img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Here is another way to do this: DEMO

function imageSize(img){
   var theImage = new Image();
   theImage.src = img.attr('src');
   var imgwidth = $(img).width();
   var imgheight = $(img).height();

   alert(imgwidth);
   alert(imgheight);
}

$('img').each(function(){
    var imgsrc = jQuery(this);
    imageSize(imgsrc);
});

edited Feb 07 '13 at 11:49

answered Feb 07 '13 at 11:40

coder

13,002
31
112
214

That `load` event img bind won't work in some browsers like some versions of Opera 11,12 for instance. Also what happens if the images are a few – kidwon Feb 07 '13 at 11:43

jquery image width and height not working on IE

4 Answers4