为什么图像有时不会显示？

我有一个博客，在这个博客中有一个摘要文章，其中包含每篇文章中的第一张图片。为了尽量保持汇总图像的大小，所以我不得不用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; 
}

来源

2014-01-10 Arthur Hargrave

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

图像正在下载，但没有显示。 –

正如你所说，图像下载就好了，但他们没有显示出来，因为你的脚本返回其宽度和高度值为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; }

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

你仍然完成自己的保护您的图片比例的目标。
您的设计将会更干净，因为您的所有图像都将具有相同的宽度。

来源

2014-01-10 22:22:20 Jerreck

非常感谢。大声笑，现在我觉得愚蠢甚至没有考虑溢出：隐藏;。现在每次都会显示图片，我不再需要继续重新加载页面。 –

几件事情来尝试

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

此外，也许图像正在下载，但它只是需要时间来显示。

来源

2014-01-10 18:20:19 dave

为什么图像有时不会显示？

回答

相关问题