Незагруженные картинки раздвигают таблицу.

272

PPM

23 ноября 2009, 10:50

783

Выводится таблица с товаром. Размер картинок изначально неизвестен - нельзя задать ширину вручную.

Но не шире 180 пикселей.

Эксплорер пока не загрузил картинку дает предварительный размер существнено шире. В результате до загрузки почти всех картинок страница расползается в ширь.

Как победить?

84

kil

23 ноября 2009, 11:03

#1

Уменьшить текст в alt?

PM

272

PPM

23 ноября 2009, 11:27

#2

kil:
Уменьшить текст в alt?

Ни за что бы не догадался.

Спасибо, помогло.

84

kil

23 ноября 2009, 11:30

#3

Ну или как вариант привлечь на помощь JavaScript:

1. Для всех изображений изначально указываем в css ширину 180px. Например, img.mypicture {width: 180px;}

2. После загрузки страницы присваиваем изображениям их же оригинальные размеры.

Вот набросал код. Вроде нормально работает :)


<html>

<head>

<title>Image size</title>

<style>

 .my_picture {width: 180px;}

</style>

<script language="JavaScript" type="text/javascript">

function getElementsByClassName(classname)

{

    var a = [];

    var re = new RegExp('\\b' + classname + '\\b');

    var els = document.getElementsByTagName("*");

    for(var i=0,j=els.length; i<j; i++)

    if(re.test(els.className))a.push(els);

    return a;

}



function getImageSize(img) {

    var clone_img = document.createElement('IMG');

    clone_img.style.visibility = 'hidden';

    clone_img.style.position = 'absolute';

    clone_img.top = 0; 

    clone_img.left = 0;

    clone_img.src = img.src;

    document.body.appendChild(clone_img);

    var image_size = {'width':clone_img.offsetWidth,'height':clone_img.offsetHeight}

    document.body.removeChild(clone_img);

    return image_size;

}



function resizeImages()

{

  images_list=getElementsByClassName('my_picture');

  for (i=0; i<images_list.length; i++)

  {

    image_size=getImageSize(images_list);

    images_list.style.width=image_size.width + 'px';

    images_list.style.height=image_size.height + 'px';

  }

}

</script>

</head>

<body onload="resizeImages();">

 <img class="my_picture" src="1.jpg"/>

 <img class="my_picture" src="2.jpg"/>

 <img class="my_picture" src="3.jpg"/>

 <img class="my_picture" src="4.jpg"/>

</body>

</html>

72

DeveloperRu

23 ноября 2009, 14:53

#4

чтобы незагруженные картинки не раздвигали текст, им нужно заранее указать ширину и высоту или уменьшить текст в alt :)

однако второе не спасет в IE

Ответы на вопросы (http://telenok.com)

84

kil

23 ноября 2009, 15:40

#5

DeveloperRu:
чтобы незагруженные картинки не раздвигали текст, им нужно заранее указать ширину и высоту или уменьшить текст в alt :)

однако второе не спасет в IE

Читаем внимательно первый пост: размер картинок изначально неизвестен.

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи