javascript - 为什么有时显示图像有时不显示图像？

Question

我有一个博客，该博客有一些摘要帖子，其中包含每篇帖子中的第一张图片。为了尝试将摘要图像保持在合适的尺寸，所以我必须使用 javascript 调整它们的大小。问题是调整它们的大小后，图像有时只会显示。在许多情况下，我必须重新加载窗口几次才能在摘要帖子中显示图像。我不明白是什么原因造成的。 博客:http://kingarthur13th.blogspot.com/

这是 JavaScript:

function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");


   var img_thumb_width;
   var img_thumb_height;

   var summ = summary_noimg;
   if(img.length>=1) {  

        img_thumb_width  = Math.round(img[0].naturalWidth  * 0.6);
        img_thumb_height = Math.round(img[0].naturalHeight * 0.6);

        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img  src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" style=" padding:5px;border:1px solid #222;"/></span>';
        summ = summary_img;
    }

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

Answer 1

正如您所说，图像下载得很好，但它们没有显示，因为脚本返回的宽度和高度值为 0。

您可以对脚本进行故障排除，以找出为什么这些值没有返回自然尺寸 * 0.6 (在我看来，您的脚本应该可以工作 - IDK 那里发生了什么)，或者您可以只指定宽度并设置高度像这样自动:

<span style="float:left; padding:0px 10px 5px 0px;"><img  src="'+img[0].src+'" width="100px" height="auto" style=" padding:5px;border:1px solid #222;"/></span>'

或者更好的是，创建一个指定 max-width 和 height auto 的 CSS 类，如下所示:

.blog-thumbnail { max-width: 100px; height: auto; }

我建议选择这两个选项之一，原因有两个:

1. 您仍然实现了保持图像比例的目标。
2. 您的设计将会更加简洁，因为所有图片的宽度都相同。