Как получить высоту скрытого изображения? - PullRequest
Новая
       2

Как получить высоту скрытого изображения?

3 голосов
/ 31 января 2011

Когда div скрыт (display:none), браузер не будет загружать изображения, которые находятся внутри него. Есть ли способ сообщить браузеру о загрузке изображения? Мне нужна высота и ширина изображения для предварительной обработки.

Примечание: из-за какого-то другого кода я не могу сделать div видимым. Проверьте пример здесь . Также пример «отложенной загрузки» для меня не подойдет.

Ответы [ 5 ]

4 голосов
/ 31 января 2011

Я добавил некоторую предварительную загрузку, обернул ее в функцию, и это помогает: 

function getImageDimension(el, onReady) {    
    var src = typeof el.attr === 'function' ? el.attr('src') : el.src !== undefined ? el.src : el;

    var image = new Image();
    image.onload = function(){
        if(typeof(onReady) == 'function') {
            onReady({
                width: image.width,
                height: image.height
            });
        }
    };
    image.src = src;
}

Может использоваться как: 

getImageDimension($('#img1'), function(d){ alert(d.height); });
var url = 'http://urology.jhu.edu/patrickwalsh/photo1.jpg';
getImageDimension(url, function(d){ alert(d.height); });
4 голосов
/ 31 января 2011

Сделайте div видимым, но поместите его вне страницы с помощью position: absolute;.

Если ваш «другой код» не позволяет вам сделать это, создайте новый узел изображения с тем же URL,поместите его за пределы страницы, подождите, пока он загрузится, прочитайте его высоту и уничтожьте.

3 голосов
/ 31 января 2011

Вы можете попробовать предварительно загрузить изображения с помощью jquery - проверьте этот SO-ответ:

Предварительная загрузка изображений с помощью jQuery

Это должно предварительно загрузить их перед вамидаже решили показать их.

0 голосов
/ 31 января 2011

Я считаю, что это верно только для элементов, чей родитель "display: none"

См. Эту статью по этому вопросу http://dev.jquery.com/ticket/125

Также см. Этот пример (сохранить как.html файл) 

<html>
<head>
<title>Example</title>



<script type="text/javascript">
    $(document).ready(function(){
        alert($("#target").height());
    });
</script>
</head>

<body>
  <div id="parent" style="display:none;">
    <div id="target" style="height:100px;display:block;">
        a
    </div>
</div>
</body>
</html>
0 голосов
/ 31 января 2011
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...