Изменение источника изображения с изображением другого размера, не будет изменять размер в IE - PullRequest
Новая
       4

Изменение источника изображения с изображением другого размера, не будет изменять размер в IE

0 голосов
/ 06 января 2011


Я пытаюсь создать очень простую галерею с использованием JavaScript.Есть миниатюры, и при нажатии на них источник большого изображения обновляется.Все работает нормально, за исключением того, что когда я пытаюсь сделать это в IE, размер изображения остается таким же, как размер исходного изображения.Допустим, исходное изображение 200x200, и я нажимаю на миниатюру изображения 100x100, изображение отображается, но оно растягивается до 200x200.Я не устанавливаю никаких значений ширины или высоты, поэтому я предполагаю, что браузер должен использовать нормальный размер изображения, как, например, FF.

, вот некоторый код: 

function showBigImage(link)
{
 var source = link.getAttribute("href");
 var bigImage = document.getElementById("bigImage");
 bigImage.setAttribute("src", source);
 return false; /* prevent normal behaviour of <a> element when clicked */
}

и htmlвыглядит так: 

<ul id="gallery">
 <li>
  <a href="images/gallery/1.jpg">
   <img src="images/gallery/1thumb.jpg">
  </a>
 </li>
    (more <li> elements ...)
</ul>

большое изображение создается динамически: 

function createBigImage()
{
 var bigImage = document.createElement("img");
 bigImage.setAttribute("id", "bigImage");
 bigImage.setAttribute("src", "images/gallery/1.jpg");

 var gal = document.getElementById("gallery");
 var gal_parent = gal.parentNode;
 gal_parent.insertBefore(bigImage, gal);
}

Также есть некоторый код, устанавливающий события onclick для ссылок, но я не думаю, что это актуально вэта ситуация.Как я уже сказал, проблема только с IE.Заранее спасибо!

1 Ответ

0 голосов
/ 07 января 2011

Похоже, IE вычисляет атрибуты width и height для #bigImage при его создании, а затем не обновляет их при изменении src.Другие браузеры, вероятно, отмечают, что им самим приходилось вычислять размеры изображения, поэтому они пересчитывают их при изменении src.Оба подхода достаточно разумны.

Знаете ли вы правильный размер изображения внутри showBigImage()?Если вы это сделаете, тогда установите явные атрибуты width и height при изменении src: 

function showBigImage(link) {
    var source   = link.getAttribute("href");
    var bigImage = document.getElementById("bigImage");
    bigImage.setAttribute("src",    source);
    bigImage.setAttribute("width",  the_proper_width);
    bigImage.setAttribute("height", the_proper_height);
    return false;
}

Если вы не знаете новые измерения, измените showBigImage(), чтобы удалить #bigImage и создайте новый: 

function createBigImage(src) {
    var bigImage = document.createElement("img"); 
    bigImage.setAttribute("id",  "bigImage");
    bigImage.setAttribute("src", src || "images/gallery/1.jpg");

    var gal = document.getElementById("gallery");
    gal.parentNode.insertBefore(bigImage, gal);
}

function showBigImage(link) {
    var bigImage = document.getElementById("bigImage");
    if(bigImage)
        bigImage.parentNode.removeChild(bigImage);
    createBigImage(link.getAttribute("href"););
    return false;
}
...