Question

我正在尝试使用Javascript预加载由PHP脚本创建的图像，但是当我在表单字段中输入新值时，我仍然可以看到在页面加载之间短暂显示alt文本。在这种情况下，有没有办法让预加载工作？

<?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>

Answer 1

问题是你的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>

预加载脚本生成的图像

1 个答案: