스크립트로 미리로드 된 이미지

PHP 스크립트로 만든 이미지를 Javascript로 미리로드하려고하지만 양식 필드에 새 값을 입력 할 때 페이지로드 사이에 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>

출처

2011-11-20 August Karlstrom

질문에 추가 정보 (예 : 마크 업 및 사용)를 제공 할 수 있습니까? 어쩌면 http://jsfiddle.net을 만들까요? –

@ Jared Farrish : 문제의 이미지 요소를 추가했습니다. –

정말 유용하지 않습니다. 당신은 약간의 코드를 사용하고 있으며 특정 문제를 일으킨다는 것을 말하고 있지만, 당신이 제공 한 것은 문제 자체를보기에는 너무 골격적입니다. 'onload' 이벤트 핸들러가 시작될 때까지 클래스 추가와 요소 숨기기에 대해 생각해 보셨습니까? 'var img '와 마크 업을 완전히 따로하고 있으니 관련이 있습니까? 핸들러를 사용하고 있습니까? 더 많은 정보가 필요합니다. –

문제는 자바 스크립트가로드되기 전에 HTML이로드되고 있다는 것입니다. alt 코드가 표시되는 것은 당연합니다. 이미지 태그를 만든 후 이미지를 미리로드하려고합니다. 당신이 할 수있는 일

는 CSS를 display:none; visibility:hidden;를 사용하여 이미지 태그를 숨기고 내가 무슨 말의 window.onLoad()

테스트되지 않은 예와 숨기기를 취소하기 위해 자바 스크립트를 사용합니다. 원래 자바 스크립트는 중복되어 있습니다. 브라우저에서 이미지를로드 할 위치를 이미 지정했습니다.

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

스크립트로 미리로드 된 이미지

답변

관련 문제