Javascript-форум - нужно, чтоб Div менялся в зависимости от размера картинки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - нужно, чтоб Div менялся в зависимости от размера картинки (https://javascript.ru/forum/dom-window/22196-nuzhno-chtob-div-menyalsya-v-zavisimosti-ot-razmera-kartinki.html)

нужно, чтоб Div менялся в зависимости от размера картинки

Нужно менять ширину divа в зависимости от того какая картинка загружена с сервера.
Вот примерно такой код:

<html>
<head>
<title></title>
<style>
div.i {
position: relative;
background-color: #FF9999;
}
img {
margin-left: 20px;
}
</style>
</head>
<body>
<div style=" height: 10px;">
<img id="hid" style="visibility: hidden;" src="3.jpg" />
</div>
<script>
var h = document.getElementById('hid').offsetWidth;
if (h<300)
{
h=300;
}
else
{
h=h;
}
var hs = 40 + h;
document.write("<div class='i' style='width: " +hs+ "px;'>")
</script>
<img src="3.jpg" />
</div>
</body>
</html>

Работает только со второй загрузки страницы раза никто не подскажет почему?

потому что при загрузке страницы код исполняется ДО того, как картинка загружена, поэтому её offsetWidth будет нулём.

во втором случае скрипт опять таки прочитывает её ширину, но картинка уже есть в кэше, и поэтому её оффсетовая ширина не равна нулю.

поэтому работает "со второго" раза

вывод : менять ширину надо после загрузки картинки.

Цитата:

Сообщение от melky (Сообщение 130571)

вывод : менять ширину надо после загрузки картинки.

А не могли подсказать, как это делается?

у тега img есть событие onload

Я очень плохо знаю js. Поэтому даже логику понять не могу. Есть событие onload, нужно остановить загрузку страницы пока оно не произойдет? И если да то как это сделать? Или как то это все проще?

Порылся на форуме нашел решение вроде:
<html><head>

<script language=javascript>
function Show(){
var ttt=document.getElementById('HidePic');
var sss=document.getElementById('Pic');
var x=ttt.width;
sss.width=x;
sss.src=ttt.src;
var j= 30;
var z=x+j;
document.getElementById('par').style.width=''+z+'p x';

}

function PreLoadImg(sss){
var ttt=document.getElementById('HidePic');
ttt.src=sss.src;
Show();
}
</script>

</head>
<body>
<div style="position:absolute;visibility:hidden;">
<IMG src="shariky.gif" id="HidePic" onload="PreLoadImg(this)"></div> 
<div id="par" style=" border: 1px solid #000;">
<IMG src="shariky.gif" border=0 id="Pic" style="padding-left: 15px;">
</div>
</body>
</html>
Теперь ошибка в IE. Никто не подскажет насколько это решение правильное и как избавится от ошибки

ttt.src=sss.src;
Show();

попробуйте так:

ttt.src=sss.src;
ttt.onload = function() {Show();};

Судя по всему IE ругается на onload. Как с этим борются?