JQuery attr не работает

Question

У меня есть изображение в контейнере, и я установил атрибуты ширины и высоты для этого изображения в CSS. Но мне нужно добавить загрузочное изображение, и оно будет меньше, чем реальные изображения, которые будут отображаться в контейнере, поэтому мне нужно изменить размер изображения во время загрузки. Но когда я устанавливаю атрибуты ширины и высоты, изображение отображается в размере, заданном в CSS.

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

Answer 1

Вы путаете атрибуты с CSS:

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

Конечно, это предполагает, что img фактически представляет изображение:

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

Если у вас нет изображения, вам нужно создать его и добавить в DOM:

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

Answer 2

Вы изучили, как будет выглядеть источник, когда вы закончите?

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

не будет работать.

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

будет.Так что удалите px единиц =)

РЕДАКТИРОВАТЬ: Как отметили другие респонденты, лучше использовать CSS.Однако оба они забыли, что в css вам нужно нужны единицы.

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

Answer 3

Не используйте attr("width") и т. Д. Для переопределения CSS, используйте css():

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

Answer 4

Возможно, вместо этого попробуйте изменить атрибуты стиля, как указано в этом вопросе ?

Answer 5

Единственной единицей для атрибутов width и height является процент (…%). Значения без этой единицы всегда являются пикселями. Поэтому попробуйте это:

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