預加載腳本生成的圖像

我試圖預加載由PHP腳本使用Javascript創建的圖像，但我仍然可以在頁面加載之間出現簡短的替代文本，當我在表單字段中輸入新值時。在這種情況下是否有辦法使預加載工作？預加載腳本生成的圖像

<?php 
$text = array_key_exists('text', $_GET)? $_GET['text']: ''; 
$image_source = 'image.php?text=' . urlencode($text); 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <script type="text/javascript"> 
     var img = new Image(); 
     img.src = "<?php echo $image_source; ?>"; 
     </script> 
    </head> 
    <body> 
     <form> 
     <div><input name="text" value="<?php echo $text; ?>" /></div> 
     </form> 

     <div><img src="<?php echo $image_source; ?>" alt="The alt text" /></div> 
    </body> 
</html>

來源

2011-11-20 August Karlstrom

您能否在您的問題中提供更多信息（如標記和用法）？也許做一個http://jsfiddle.net？ –

@Jared Farrish：好的，我添加了有問題的圖片元素。 –

這不是很有用。你說的是你使用了一些代碼，並且它引發了一個特定的問題，但是你提供的代碼太骨節，無法看到問題本身。你有沒有想過添加一個類並隱藏元素，直到'onload'事件處理程序觸發？你是否完全獨立完成'var img'和標記，所以它們是相關的？你甚至使用處理程序？需要更多信息。 –

問題是，你的html在javascript之前加載。 alt代碼顯示是有意義的。您正嘗試在創建圖像標記之後預加載圖像。

你可以做的是使用CSS display:none; visibility:hidden;隱藏圖像標籤和使用JavaScript什麼我談論的window.onLoad()

未經測試的例子來取消隱藏。請注意，原始的JavaScript是多餘的;你已經告訴瀏覽器從哪裏加載圖像。

<?php 
$text = array_key_exists('text', $_GET)? $_GET['text']: ''; 
$image_source = 'image.php?text=' . urlencode($text); 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <script type="text/javascript"> 
     window.onload(function(){ 
      document.getElementById("preload").style.visiblity="visible"; 
      document.getElementById("preload").style.display="inline"; 
     }); 
     </script> 
    </head> 
    <body> 
     <form> 
     <div><input name="text" value="<?php echo $text; ?>" /></div> 
     </form> 

     <div><img id="preload" style="visibility:hidden; display:none;" src="<?php echo $image_source; ?>" alt="The alt text" /></div> 
    </body> 
</html>

來源

2011-11-21 00:46:13 Ben

預加載腳本生成的圖像

回答

相關問題