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");

Answer 1

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");

Answer 2

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

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

Answer 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";});

Answer 4

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

Answer 5

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");