jQuery attr is not working

Question

I have image in container and I have set width and height attributes for this image in CSS. But I need to add loading image and it is smaller than actual pictures that will be shown in container, so I need to change size of image while it is loading. But when I set width and height attributes, image is shown in size that is set in CSS.

$(img).attr("src", "loading.gif");
$(img).show();
$(img).attr("width", "100px");
$(img).attr("height", "100px");

Instead of assuming that a framework that MANY people use is broken (especially in such a key place as this), try to read up on what you may be doing wrong. — Isaac, Jan 16 '10 at 18:25

score 5 · Accepted Answer · answered Jan 16 '10 at 18:18

5

You're confusing attributes with CSS:

$(img)
  .attr("src", "loading.gif")
  .css({width:100,height:100})
  .show();

Of course this assumes that img is actually representing an image:

var img = $("img.myImage");

If you don't have an image, you'll need to create one, and append it to the DOM:

$("<img>")
  .attr("src", "loading.gif")
  .css({width:100,height:100})
  .appendTo("body");

answered Jan 16 '10 at 18:18

Sampson

265,109
74
539
565

Ok it was my mistake, thanx for all answers! – newbie Jan 16 '10 at 18:25
@newbie: were you trying to *create* an image? – Sampson Jan 16 '10 at 18:25

Tomas Aschan · Answer 2 · 2010-01-16T18:26:22.997

3

Have you examined what the source will look like when you're done?

<img src="loading.gif" width="100px" height="100px" />

won't work.

<img src="loading.gif" width="100" height="100" />

will. So remove the px units =)

EDIT: As the other responders pointed out, it's better to use css. However, both of them forgot that in css you do need the units.

$(img).css({width: "100px"; height: "100px";});

edited Jan 16 '10 at 18:26

answered Jan 16 '10 at 18:19

Tomas Aschan

58,548
56
243
402

Ha - I apparently don't have my units/not units down either =) – Tomas Aschan Jan 16 '10 at 18:26

score 2 · Answer 3 · answered Jan 16 '10 at 18:18

2

Don't use attr("width") etc to override CSS, use css():

$(img).attr('src', 'loading.gif').show().css({ width: 100, height: 100 });

answered Jan 16 '10 at 18:18

Doug Neiner

65,509
13
109
118

score 1 · Answer 4 · edited May 23 '17 at 10:27

1

Maybe try adjusting the style attributes instead, as per this question?

edited May 23 '17 at 10:27

Community

1
1

answered Jan 16 '10 at 18:20

tfwright

2,844
21
37

score 0 · Answer 5 · answered Jan 16 '10 at 18:25

0

The only unit for the width and height attributes is a percentage (…%). Values without that unit are always pixels. So try this:

$(img).attr("width", "100");
$(img).attr("height", "100");

answered Jan 16 '10 at 18:25

Gumbo

643,351
109
780
844

jQuery attr is not working

5 Answers5