在打印介質中加載外部圖像

僅當打印頁面時，標題的右側應該有圖像。我宣佈以下樣式：在打印介質中加載外部圖像

@media print { 
    h1::after { 
    content: url(IMAGE_URL_HERE); 
    position: absolute; 
    top: 0; 
    right: 0; 
    } 
}

的問題是，圖像不會出現在（任何瀏覽器）打印預覽。但是，如果我打印預覽對話框關閉並重新打開，則圖像將顯示得很好。

你可以嘗試重現它youself：http://jsbin.com/gevefivi

有什麼我做錯了或者是預期的行爲？

更新：我認爲它與引擎的打印佈局渲染內部的競態條件有關，因爲當我引用本地圖像時，它總是顯示在打印預覽中並且打印得很好。

UPDATE：貌似打印引擎真的外部資源之前content: url()不等待加載，但生成的PDF文件進行預覽，這就是爲什麼沒有像那裏，如果圖像的獲取需要一定的時間來完成。但它確實發送HTTP請求並將其保存到本地以供下次使用。所以這就解釋了爲什麼當打印預覽第二次打開時它通常工作正常。

我與以下PHP文件作爲外部資源測試了它：

<?php 

sleep(5); 

// Create a blank image and add some text 
$im = imagecreatetruecolor(120, 20); 
$text_color = imagecolorallocate($im, 233, 14, 91); 
imagestring($im, 1, 5, 5, 'A Simple Text String', $text_color); 

// Set the content type header - in this case image/jpeg 
header('Content-Type: image/jpeg'); 
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache"); 

// Output the image 
imagejpeg($im); 

// Free up memory 
imagedestroy($im);

它僅在5秒內返回一個圖像。要重現此問題，請確保上面的PHP文件位於本地服務器上，或者最糟糕的情況是位於本地網絡中。請參閱content: url()並打開「打印預覽」對話框。你不會看到圖像。關閉對話框。打開對話框，你仍然看不到圖像。等待2-3秒。打開它，你會看到圖像被提取和緩存。如果您刪除了sleep(5);行，您應該在第一次打開「打印預覽」對話框時看到圖像。

仍然渴望知道這是一個錯誤還是這是一個預期的行爲，以及目前是否有工作解決方案。

來源

2014-07-10 Sergey Lukin

嗯，我認爲它應該被認爲是明智的，當需要才瀏覽器無法加載圖像...至於你的問題的解決方法，你可以簡單地「預加載」的通過將它作爲某些元素的背景（可能是尺寸爲1x1px或canvas的背景）放置在普通屏幕樣式表中 - 以便在調用打印預覽時它已經在緩存中。 – CBroe

當然，但我更願意加載儘可能少的資源。這不是一個選項。無論如何感謝您的回覆。 Btw瀏覽器不會加載圖像（請參閱我的問題更新），它只是不等待它們在生成最終打印版本之前完全加載。 –

經過數小時的實驗後，我得出結論，截至今天，Web瀏覽器只是不等待打印特定樣式表中指定的任何外部資源在呈現打印就緒文檔之前完全下載。

因此，似乎在打印版本的頁面中顯示外部資源的唯一方法是在用戶決定打印之前至少下載它們（通過html標記，屏幕樣式表或JavaScript，其實並不重要）該頁面。

而且，不，似乎這不是一個錯誤，而是當前主要供應商接受的標準。

來源

2014-07-10 23:53:36

好點OP，我是在同樣的情況，我發現了一個竅門通過CSS預裝圖像：因爲我每次加載圖像這是不是最好的辦法：如果我把你的代碼/

：

print.css

.h1:before { 
     content: url(IMAGE_URL_HERE); 
}

屏幕。CSS

h1 { 
     background: url(IMAGE_URL_HERE) no-repeat -9999px -9999px; 
     //img not displayed but loaded 
}

問候

來源

2014-09-26 13:21:53

在打印介質中加載外部圖像

回答

相關問題