Определить высоту img перед загрузкой с помощью Javascript

Я пытаюсь изменить широко доступную функцию Javascript для использования с сайтом Blogger. Целью функции является создание миниатюры и коротких фрагментов для каждого сообщения на главной странице. Я пытаюсь изменить функцию, чтобы она определяла, является ли изображение портретным или ландшафтным и соответствующим образом изменяет его размер (например, пейзаж должен иметь ширину 175 пикселей, портрет должен быть высотой 175 пикселей). Однако всякий раз, когда я пытаюсь сделать ссылки на высоту/ширину изображения, они появляются либо 0, либо нуль. Я считаю, что проблема в том, что изображения еще не загружены или не записаны на страницу.Определить высоту img перед загрузкой с помощью Javascript

Как я могу изменить приведенный ниже код, чтобы решить эту проблему?

<script type='text/javascript'> 
    summary_noimg = 550; 
    summary_img = 450; 
    img_thumb_height = 175; 
    img_thumb_width = 175; 
</script> 

<script type='text/javascript'> 
//<![CDATA[ 
function createSummaryAndThumb(pID,pLink){ 
    var div = document.getElementById(pID); 
    var imgtag = ""; 
    var img = div.getElementsByTagName("img"); 
    var img_w = img[0].clientWidth; 
    var img_h = img[0].clientHeight; 
    var summ = summary_noimg; 
    if(img.length>=1) { 
     if (img_w > img_h) { 
     imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+pLink+'"><img src="'+img[0].src+'" height="'+img_thumb_height+'px"/></a></span>'; 
     } 
     else if (img_w <= img_h) { 
     imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+pLink+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>'; 
     } 

     summ = summary_img; 
    } 

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
    div.innerHTML = summary; 
} 
//]]> 
</script>

источник

2015-07-19 Keeb13r

Высота/ширина изображения неизвестны, пока не загружена хотя бы первая часть изображения. Единственные два варианта получения высоты и ширины - дождаться загрузки изображения (когда происходит событие 'load') или сделать отдельный запрос Ajax для получения высоты/ширины. Оба являются асинхронными операциями, которые происходят через некоторое время, поэтому ваш код должен быть реструктурирован, чтобы учесть тот факт, что высота/ширина изображения неизвестны дольше. – jfriend00

Почему вы не обертываете funciton из windows.onload = {}? – newday

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

function createSummaryAndThumb(pID,pLink){ 
    var div = document.getElementById(pID); 
    var imgtag = ""; 
    var img = div.getElementsByTagName("img"); 
    var img_w = img[0].clientWidth; 
    var img_h = img[0].clientHeight; 
    var summ = summary_noimg; 

    img.addEventListener('load', function() { 
     if(img.length>=1) { 
     if (img_w > img_h) { 
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+pLink+'"><img src="'+img[0].src+'" height="'+img_thumb_height+'px"/></a></span>'; 
     } 
     else if (img_w <= img_h) { 
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+pLink+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>'; 
     } 

     summ = summary_img; 
     } 
    }, true); 


    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
    div.innerHTML = summary; 
}

источник

2015-07-19 18:02:51 Secret

Что можно сказать о следующем растворе: Javascript - Get Image height

Это позволяет передать ссылку на изображение перед загрузкой его получить свою информацию, и чем вы можете делать то, что когда-либо логики вы хотите.

источник

2015-07-19 18:16:40 Liron

Определить высоту img перед загрузкой с помощью Javascript

ответ

Смежные вопросы