Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Динамическое создание image

Автор: Atlete 5.11.2009, 11:54

Вот столкнулся со следующей проблемой.
Написал не сложный tooltip с картинками.
Создаю картинку, добавляю на страницу.
Все это работает. Но при создании необходимо получить размер
картинки (ширину, высоту). Если картинка больше максимального размера
изменить ей высоту и ширину до максимальной.
Код примерно такой:

Код


var img = document.createElement('img');
img.src = addr;
//img.src = setAttribute('src',addr);
alert(img.width+':'+img.height);

Вот тут получается что высота и ширина равна нулю.
Пробовал получать ширину и высоту следующим образом:

Код


function getWidth (elem){
     return elem.offsetWidth || this.getStyle(elem,'width') || this.getStyle(elem,'min-width') || elem.width;
}

Результат тот-же.
Есть ли возможность получить реальную высоту и ширину создаваемой так картинки.

Возможно необходимо загрузить все нужные картинки в скрытом div'е например, а потом
уже при создании использовать их. Это еще не пробовал.

У кого есть еще какие мысли? Что я делаю не так?

Автор: bars80080 5.11.2009, 12:00

может она ещё не загрузилась?

вообще, картинки привычнее создавать var img = new Image();
проверить состояние загрузки, вроде через img.onload = function() {}; можно

Автор: Atlete 5.11.2009, 12:06

Похоже это оно.
Я как то совсем забыл про этот метод.
Думаю теперь все будет работать правильно.

Спасибо.

Автор: IDVsbruck 5.11.2009, 12:56

И еще кроме как createElement или new Image надо поместить созданный элемент в ДОМ. Пока он не помещен, его визуальные стили не посмотришь.

Автор: youri 6.11.2009, 12:35

зато width и height посмотришь. А src лучше назначать после назначения onload

Автор: Atlete 6.11.2009, 12:46

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

Автор: youri 6.11.2009, 14:51

Цитата(Atlete @ 6.11.2009, 12:46

)

Если src назначать в onload то получается размер картинки тоже только после выполнения onload можно узнать?

Если src назначать в onload, то получиться бред. Ты мои сообщения по диагонали читаешь?

Автор: Atlete 6.11.2009, 17:23

youri прошу прощения сильно. Недосмотрел smile

.

Перенес присвоение присвоения src после установления onload.
Но возникла интересная (неприятная) ситуация.
В ИЕ6 и Opeara 10 при первом выполнении функции onload вызывается и все отрабатывает как положено.
Но при повторном вызове функции onload не срабатывает.
Проверял при помощи такой строки:

Код


img.onload = function(){
      document.getElementById('testit').innerHTML = 'run';
      . . . . . . 
}

Как можно заставить нормально отрабатывать метод onload при повторном вызове функции?
Возможно что то делаю не так.

Автор: bars80080 6.11.2009, 18:48

по-моему, у оперы насчёт загрузки изображений был глюк. и здесь кто-то выкладывал решение его

Автор: youri 6.11.2009, 22:10

выложили минимальный неработающий пример. Я как раз это проверял (по идее), когда отвечал. У меня работало в любом порядке, но src логичнее назначать после onload, чтобы всегда срабатывало

Автор: Atlete 9.11.2009, 10:36

К сожалению не помогло даже изменения место положения присвоения src.
Вот полный код функции:

Код


function showModalImage3(addr){
    closeShowModalImage3();
    var scr_w = serv.getScreenWitdh();
    var scr_h = serv.getScreenHeight();
    var img = null;
    img = new Image();//document.createElement('img');
    var c_top = serv.getScrollTop();// get top position
    var add_delta = 0;
    var body = document.getElementsByTagName('body');
    var div = document.createElement('div');
    var div_arc = document.createElement('div');
    
    
    var imgwidth = img.width;
    var imgheight = img.height;
    
    
    if(navigator.appName=='Microsoft Internet Explorer'){
        add_delta = c_top;
    }
    div.innerHTML = '<div style="text-align:right;padding-bottom:5px;"><span onclick="closeShowModalImage3();return false;" style="cursor:pointer;">'+'<span style="color:666666;font-weight:bold;">CLOSE'+' <span style="font-size:12px;">[ X ]</span></span></div><br/><div id="waiting" style="width:300px;height:300px;text-align:center;"><image style="margin-top:100px;" src="/images/waitimage.gif"/></div>';
    div_arc.className='angle';
    div_arc.zIndex=10;
    
    div_arc.style.top=add_delta+mouseY;
    div_arc.style.left=mouseX;
    div_arc.style.position="absolute";
    
    div.style.position="absolute";
    var step_up = (imgheight>0?imgheight/4:50);
    var top = add_delta+mouseY-step_up;
    var left = mouseX+8; 
    div.zIndex=10;
    div.style.top=top;
    div.style.left=left;
    div.style.borderWidth='1px';
    div.style.borderColor='#8EAACE';
    div.style.backgroundColor="#EEF5FF";
    div.style.padding='5px';
    div.style.borderStyle='solid';
    current_screenshot=div;
    current_screenshot_close=div_arc;
    
    img.onload = function(){
        // add image after load
        document.getElementById('testit').innerHTML = 'run';
        imgwidth = img.width;
        imgheight = img.height;
        ratio = imgheight / imgwidth;
        
        if(imgwidth>800){
            img.width = 800;
            img.height = parseInt(800 * ratio);
            imgwidth = 800;
            imgheight = parseInt(800 * ratio);
        }
        
        var divimage = document.createElement('div');
        divimage.id = 'showimage';
        divimage.appendChild(img);
        $('#waiting').hide();
        div.appendChild(divimage);
    }
    
    img.src = addr;
    body[0].appendChild(div);
    body[0].appendChild(div_arc);
    window.scrollTo(0,top-10);
}

Возможно где то туплю.

P.S. не судите строго знаю что некоторые вещи сделаны топорно smile

Автор: Atlete 9.11.2009, 11:19

Проблему решил.

Первое:

Код


header("Expires: Mon, 01 Jan 2000 00:00:00 GMT");   
header("Cache-Control: no-cache, must-revalidate");  
header("Pragma: no-cache");  
header("Last-Modified: ".gmdate("d, d m y h:i:s")." GMT");

ну и немного подправил javascript:
было:

Код


...
$('#waiting').hide();
...

стало:

Код


...
div.innerHTML = '<div style="text-align:right;padding-bottom:5px;"><span onclick="closeShowModalImage3();return false;" style="cursor:pointer;">'+'<span style="color:666666;font-weight:bold;">CLOSE'+' <span style="font-size:12px;">[ X ]</span></span></div><br/>';
...

Возможно кому то пригодится и такая реализация.

Автор: youri 9.11.2009, 16:05

ты б может стили в css вынес... да и вообще, разбил бы эту функцию на меньшие (;

Цитата(Atlete @ 9.11.2009, 11:19

)

Проблему решил

а ты что фотографии с помощью php отдаешь? И значит теперь фотографии не будут никогда кешироваться?

Автор: Atlete 9.11.2009, 22:45

Это скриншоты. Я их не отдаю с помощью php. Они лежать в определенной папке.
Но кешироваться они не будут.
Насчет модернизации скрипта, то можно кроме выноса стилей css
еще и все остальное переделать на более правильный вид.
Возможно на досуге и оптимизирую.
Из-за кеширования и не работал метод onload.
Запретил кеширование и все заработало.

Автор: youri 10.11.2009, 16:16

Цитата(Atlete @ 9.11.2009, 22:45

)

Это скриншоты. Я их не отдаю с помощью php. Они лежать в определенной папке.

Цитата(Atlete @ 9.11.2009, 11:19

)

header("Expires: Mon, 01 Jan 2000 00:00:00 GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); header("Last-Modified: ".gmdate("d, d m y h:i:s")." GMT");

а (: т.е. ты добавил заголовки к основной страничке и думаешь, что фотографии кэшироваться не будут? Тогда это решение очень похоже на "Переставил компьютер в другую комнату. Всем спасибо. Тему можно закрывать".

Цитата(Atlete @ 9.11.2009, 22:45

)

Но кешироваться они не будут.

за счет чего?

Цитата(Atlete @ 9.11.2009, 22:45

)

Из-за кеширования и не работал метод onload.Запретил кеширование и все заработало.

У меня все работает и в ie6 и в opera 10, при том что фотографии достаются из кэша. Попробуй простейшую страничку

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<body>
<script type="text/javascript">
var img = new Image();
img.onload = function() {
    alert(1);
}
img.src = 'blank.gif';
</script>
</body>
</html>

и скажи, какие заголовки возвращает сервер