이미지가 시작에서 로딩되지 않습니다.

내 웹 사이트에서이 코드를 사용하고 있지만 페이지가 열릴 때 이미지가로드되지 않습니다. 시작시 이미지를로드 한 다음 클릭하면 이미지를 변경하고 클릭하면 링크가 표시됩니다. 임 코딩이 잘되지 않아 도움이 될 것입니다.이미지가 시작에서 로딩되지 않습니다.

여기에 사용되는 코드입니다. 브라우저에서

없음 캔버스 지원

<!doctype html> 
<html> 
<body> 
<head> 
    <script> 
    function init() { 
     setImageOne(); 
    } 

    function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); } 

    function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); } 

    function setImage(src) { 
     var canvas = document.getElementById("e"); 
     var context = canvas.getContext("2d"); 
     if (context == null) return; 
     var img = new Image(); 
     img.src = src; 
     context.drawImage(img, 0, 0, 322, 200); 
    } 
    </script> 
</head>

는

출처

2013-06-07 Andrew Harris

브라우저에 Canvas 지원 기능이없는 경우 캔버스 js 메서드를 호출하는 이유는 무엇입니까? – DrCord

당신은 당신이 그것을 그리기 전에로드 할 이미지를 기다릴 필요가있다. 또한 브라우저가 캔버스를 지원하지 않는다면이 방법으로는 아무 도움이되지 않습니다.

function setImage(src) { 
    var canvas = document.getElementById("e"); 
    var context = canvas.getContext("2d"); 
    if (context == null) return; 
    var img = new Image(); 
    img.onload = function() { 
     context.drawImage(img, 0, 0, 322, 200); 
    }; 
    img.src = src; 

}

출처

2013-06-07 23:48:12

도움을 주셔서 감사하지만 내가 여분의 코드를 사용했을 때 이미지가 전혀로드되지 않습니다. –

내 대답을 편집했습니다. 죄송합니다. 소스를 설정하기 전에 콜백을 설정해야합니다. –

이미지가로드 될 때까지 기다려야합니다. 따라서 귀하의 코드 (HTML 마크 업에 대한 수정과)해야한다 : 캔버스 전을 지원하는 브라우저에서

<!DOCTYPE html> 
<html lang="en-us"> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
    <canvas id="e" style="width: 100%; height: 100%;"></canvas> 
    <script> 
    function init() { 
     setImageOne(); 
    } 

    function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); } 

    function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); } 

    function setImage(src) { 
     var canvas = document.getElementById("e"); 
     var context = canvas.getContext("2d"); 
     if (context == null) return; 
     var img = new Image; 
     img.onload = function(){ 
      context.drawImage(img, 10, 10); 
     }; 
     img.src = src; 
    } 
    init(); 
    </script> 
    </body> 
</html>

이 유일한 작품 : 크롬 (IUM)

또한 당신이 this

출처

2013-06-07 23:53:30 Matyas

이를 읽기 제안 처음 시도한 방법 은요? 웹 사이트에 이미지를 추가하고 그 위에 마우스를 올리려고하면 훨씬 간단한 방법이 있습니다.

대신 이미지를 생성하고로드 자바 스크립트를 사용은 HTML <img> 태그, 예를 사용 오프 첫째 :

<img src="http://earthbounds.com/banners/amazing food.jpg">

지금 간단한 가져가 이미지 변화를 추가하기를,이 가장 좋은 방법이지만위한 아니다

이제

<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">

이 이미지를 다른 페이지로 연결되는 링크를 만들기 위해, 또는 웹 사이트에 당신은 <a> 태그 예제를 사용 : 예, 하나의 이미지를 위해 당신은 onmouseover 및 onmouseout, 예를 사용할 수 있습니다 :

<a href="www.google.ca"><img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')"></a>

희망이 있으시길 바랍니다. 계속 찾고 배우십시오!

출처

2013-06-07 23:56:01

Dylan N 사실, 지금 내게 준 코드가 첫 번째 선택 이었지만 작동하지 않아 html5 캔버스가 더 좋을 것이라고 판단했습니다. 나는 당신이 준 코드를 정확히 복사했으나 작동하지 않는 것 같습니다. –

이미지가 시작에서 로딩되지 않습니다.

답변

관련 문제