为什么有时显示的图像有时不显示？答案

【问题标题】：Why does the images in show sometimes and doesn't other times?为什么有时显示的图像有时不显示？
【发布时间】：2014-01-10 18:12:07
【问题描述】：

我有一个博客，对于这个博客，有一个摘要帖子，其中包含每篇帖子中的第一张图片。为了尝试将摘要图像保持在合适的大小，所以我不得不使用 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;
}

【问题讨论】：

您是否检查过图片是否真的在下载？如果他们正在下载，但没有出现，那是你的标记/样式/脚本有问题。如果它们根本没有下载，那么您动态加载图像文件路径的方式可能存在问题。
图片正在下载，但没有显示。

标签： javascript

【解决方案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>'

或者更好的是，创建一个指定最大宽度和高度自动的 CSS 类，如下所示：

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

出于两个原因，我建议选择这两个选项之一：

您仍然可以实现保留图像比例的目标。
您的设计会更简洁，因为所有图片的宽度都相同。

【讨论】：

非常感谢。大声笑，现在我什至不考虑溢出：隐藏；。图片现在每次都会显示，我不再需要不断重新加载页面。

【解决方案2】：

有几件事可以尝试

检查您从img_thumb_width 和img_thumb_height 获得的值。你应该使用整数值，你可能会得到一个浮点数。

另外，也许图片正在下载，但只是需要一些时间才能显示出来。

【讨论】：