jQuery изменить размер изображения и содержание Div - PullRequest
Новая
       51

jQuery изменить размер изображения и содержание Div

1 голос
/ 20 апреля 2011

У меня есть обертка для изображений div, которая содержит изображение и подпись.

Используя следующую обертку изображения div имеет размер, равный ширине изображения: 

$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

Я также хотел бы использовать другой путь к изображению, если он зависит от родителя div учебный класс.Следующие работы: 

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});

Но их объединение не всегда устанавливает ширину обёртки изображения div.

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});
$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

Есть какие-нибудь предложения?

Благодаря двум очень быстрым ответам я реструктурировал свой код и использовал функцию .load() для получения измененных деталей изображения.

Работакод: 

$('.grid_12').each(function(){
   $(this).find('img').each(function(){
     $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
     $(this).load(function(args){
       var newWidth = $(this).outerWidth();
       $(this).parent('.imgright').each(function(){
         $(this).width(newWidth);
       })
     })
   })
});

Ответы [ 2 ]

0 голосов
/ 20 апреля 2011

Для начала вы можете использовать цепочку, чтобы сделать ваш код немного более лаконичным: 

$('.grid_12').each(function(){
    $(this)
        .find('img')
            .each(function(){
                $(this)
                      .attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
            })
            .end()
        .width($(this).find('img').outerWidth());
});

Теперь, что касается вашей проблемы, то, что происходит, это то, что вы загружаете изображение (изменяя его src), а затем сразу же пытаетесь получить его размеры без предварительной проверки, чтобы увидеть, закончилось ли еще загрузка изображения.

Похоже, что этот вопрос поможет вам в правильном направлении:

Как определить, загружено ли изображение, используя Javascript / jQuery?

0 голосов
/ 20 апреля 2011

Может быть, изображения еще не загружены? Вы можете добавить обработчик загрузки к изображению при изменении ImagePath 

$('.grid_12').each(function(){
  $(this).find('img').each(function(){
    $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    $(this).load(function(args){/* find the parent div and change size */});
  });
});
...