爲什麼圖像有時不會顯示？

我有一個博客，在這個博客中有一個摘要文章，其中包含每篇文章中的第一張圖片。爲了儘量保持彙總圖像的大小，所以我不得不用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

爲什麼圖像有時不會顯示？

回答

相關問題