Question

我正在尝试修改广泛使用的Javascript函数，以便与Blogger网站一起使用。该功能的目的是为主页上的每个帖子创建缩略图和简短模糊。我正在尝试修改该功能，以便确定图片是纵向还是横向并相应调整大小（例如，横向应为175px宽，纵向应为175px高）。但是，每当我尝试引用图像的高度/宽度时，它们都会出现0或null。我认为问题是图像尚未加载或写入页面。

如何修改以下代码以解决此问题？

<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>

Answer 1

以下解决方案如何：Javascript - Get Image height

它允许您在加载图像之前传递链接到图像获取其信息，而不是您可以执行您想要的任何逻辑。

Answer 2

在加载之前无法确定图像的尺寸。您可以在这里做的唯一事情是等待加载图像然后运行代码，或者在图像添加到页面之前发送单独的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;
}

在加载Javascript之前确定img的高度

2 个答案: