Форум

bazilio2010 · #1 (**permalink**) 10.10.2011, 00:26

Нужно менять ширину 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>

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

melky · #2 (**permalink**) 10.10.2011, 07:39

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

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

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

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

bazilio2010 · #3 (**permalink**) 10.10.2011, 12:14

Сообщение от melky

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

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

розовый слоник · #4 (**permalink**) 10.10.2011, 12:54

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

bazilio2010 · #5 (**permalink**) 10.10.2011, 14:02

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

bazilio2010 · #6 (**permalink**) 10.10.2011, 18:55

Порылся на форуме нашел решение вроде:
<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. Никто не подскажет насколько это решение правильное и как избавится от ошибки

Nikoole · #7 (**permalink**) 10.10.2011, 20:01

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

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

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

bazilio2010 · #8 (**permalink**) 10.10.2011, 22:36

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

Форум

Справочник

Discord чат

Курсы javascript