Форум PHP программистов > получить ширину рисунка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

quickxyan

28.04.2012 - 00:05

написал как-то небольшой просмотрщик фоток на сайт. Яваскрипт проводит простые подсчеты, чтобы вывести картинку ровно по центру экрана пользователя. Сама проблема в том, что иногда картинка показывается не там где нужно. То есть я получаю высоту и ширину картинки 1 на 1 пиксель.


function show(src){
    var modal = document.getElementById("modalpic");
    namePic = src.substring(src.lastIndexOf("/")+1,src.length);
    modal.src = 'images/'+namePic;

    vysota  = modal.height;
    shyrina = modal.width;
    alert(vysota); 

    modal.style.left = (document.body.clientWidth  / 2) - shyrina/2+"px"; //выравнивание по центру горизонтали
    modal.style.top  = (document.body.clientHeight / 2) - vysota/2+"px"; //выравнивание по центру вертикали
    
    
}

Как я понимаю, то иногда скрипт не успев получить ширину и высоту уже производит подсчеты и поэтому рисунок стает не там где надо. поместил получение высоты и ширины в цикл на 5 раз. Теперь почти всегда картинки отображаются правильно, но все равно бывает и этот баг.

заметил, что в таких просмотрщиках реализованых на jquery обычно есть картинка загрузки рисунка и сделал вывод, что там наверное такое же случается и поэтому сначала идет какая-то загрузка и потом только когда получены норм координаты, то картинка показывается.
Ну вот только беда в том, что я не пойму по какому принципу делается эта задержка и как выясняется загрузилась ли картинка в память ?!

Как можно обойти эту всю чехарду?

Спустя 4 минуты, 17 секунд (27.04.2012 - 22:09) Nikitian написал(а):

Как вариант, поставить подсчёт ширины и все дальнейшие действия в обработчик onload этой картинки.

Спустя 5 минут, 38 секунд (27.04.2012 - 22:14) quickxyan написал(а):

Nikitian
вот как раз покопался в лайтбоксе и наткнулся на


preloader = new Image;
      preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);
      };

только у меня же не создается новая картинка, а только перезагружается src. Можно ли в таком случае использовать onload() ?

Спустя 10 минут, 34 секунды (27.04.2012 - 22:25) quickxyan написал(а):

написал так


var vysota;
var shyrina;
    
namePic = src.substring(src.lastIndexOf("/")+1,src.length);
modal.src = 'images/'+namePic;
    
modal.onload=function(){
        vysota  = modal.height;
        shyrina = modal.width;
    }

теперь рисунки появляются почти в левом верхнем углу

Спустя 6 минут, 54 секунды (27.04.2012 - 22:32) Nikitian написал(а):


var modal;
function show(src){
    window.modal = document.getElementById("modalpic");
modal.onload=function(){
        vysota  = window.modal.height;
        shyrina = window.modal.width;
window.modal.style.left = (document.body.clientWidth  / 2) - shyrina/2+"px"; //выравнивание по центру горизонтали
    window.modal.style.top  = (document.body.clientHeight / 2) - vysota/2+"px"; //выравнивание по центру вертикали
    }  
namePic = src.substring(src.lastIndexOf("/")+1,src.length);
    window.modal.src = 'images/'+namePic;
}

как--то так

Спустя 6 часов, 54 минуты, 44 секунды (28.04.2012 - 05:27) quickxyan написал(а):

Nikitian
Спасибо большое заработало, я так понимаю, что все дело в глобальной переменной !?

И еще у меня остался не ясный момент. Как скрипт правильно вычисляет ширину и высоту, если src подгружается после вычисления ?!

Спустя 4 часа, 4 минуты, 24 секунды (28.04.2012 - 09:31) Nikitian написал(а):

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

Спустя 2 дня, 23 часа, 13 минут, 6 секунд (1.05.2012 - 08:44) quickxyan написал(а):

немного решил переделать код и опять получается фигня.


<script>
var modal;
function showModal(src){
    window.modal = document.getElementById("modalpic");  //рисунок в модальном окне
    var back     = document.getElementById("modalback"); //задний план за модальным окном
    var main     = document.getElementById("modalmain"); //див в котором все лежит
    var fixed    = document.getElementById("fixed");     //див размером 800 на 450
    var Mwidth   = 800;         //ширина белого прямоугольника в котором грузится фотка
    var Mheight  = 450 ;        //высота белого прямоугольника в котором грузится фотка
    
    back.style.width  = document.body.scrollWidth +"px"; 
    back.style.height = document.body.scrollHeight+"px";
    
    fixed.style.left = (document.body.clientWidth-820)/2+"px";  //установка белого прямоугольника
    fixed.style.top  = (document.body.clientHeight-450)/2+"px"; //в центр окна
    
    modal.onload=function(){
        var vysota  = window.modal.height; //высота нового рисунка
        var shyrina = window.modal.width;  //ширина нового рисунка
        
        if(vysota > shyrina){ //если высота нового рисунка больше ширины
            if(vysota > Mheight-100){ //если ширина > ширины белого прямоугольника - 100 пикселей (отступы)
                vysota = Mheight-100; //ширина окна = ширина прямоугольника - 100
                window.modal.style.height = vysota+"px"; //присваиваем высоту самому модальному окну
            }
        }else if(vysota < shyrina){ //если ширина рисунка меньше длины
            if(shyrina > Mwidth-100){   //если длина больше длины белого прямоугольника
                shyrina = Mwidth-100;   //длина окна = длине белого прямоугольника
                window.modal.style.width  = shyrina+"px"; //присваиваем длину модальному окну
            }
        }

        //выравнивание по центру горизонтали
        window.modal.style.left = (800 - shyrina) /2 +"px"; //выравнивание по левому краю
        window.modal.style.top  = (490 - vysota) /2 +"px";  //выравнивание по верхнему
    }
    window.modal.src = src;
    main.style.display = "block";                           //показываем окно
}   

function hideModal(){
    document.getElementById("modalmain").style.display="none";
}

</script>

Модальное окно


<div id = "modalmain" >
    <img src = "back.png" id = "modalback" width = "1" height = "1" onclick = "hideModal()">

    <div id="fixed">
        <div id="left"></div>
            
        <img id="modalpic">
            
        <div id="right"></div>
        
        <div id="social">
            <center>
            <table>
            <tr>
            <td>
                <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
                <script type="text/javascript">
                    VK.init({apiId: 2877286, onlyWidgets: true});
                </script>

                <div id="vk_like"></div>
                <script type="text/javascript">
                    VK.Widgets.Like("vk_like", {type: "button"});
                </script>
            </td>
            <td style="padding-top:55px;">
                <iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
                scrolling="no" frameborder="0"
                style="border:none; width:250px; height:80px"></iframe>
            </td>
            </tr>
            </table>
            </center>
        </div>   
    </div>
</div>

Если кликать по первой фотке у которой ширина больше длины (вертикальная), то рисунок стает почти правильно, при закрытии окна и открытии нового модального окна все работает нормально.
Если же кликать по первой горизонтальной фотке, то она стает не на свое место так как и в первом случае, но а потом все фотки растягивает до её ширины (даже вертикальные).

Надеюсь, что хоть немного ясно объяснил

_____________
печатаю со скоростью 320 минут в знак...

плюсуем карму не стесняемся

Быстрый ответ:

Здесь расположена полная версия этой страницы.