자바 스크립트로드 이미지

Question

나는 이미지의 배열을 생성

function initialize(){ 
//add our 10 images to our array 
imgArray[imageNum++] = new imageItem(imageDir + "img1.jpg"); 
imgArray[imageNum++] = new imageItem(imageDir + "img2.jpg"); 
imgArray[imageNum++] = new imageItem(imageDir + "img3.jpg"); 

} 
var totalImgs = imgArray.length; 

그때 내 html 파일에 연계되는 함수 만들

:

<button id="startButton" onclick="startImage()">Start</button> 

function startImage(){ 

    document.getElementById("pic").setAttribute("src", imgArray[0].src); 
} 

내 이미지 태그 : <img id="pic" src="" height="300" width="500" border="0" alt="image"> 내 img 객체를 업데이트하지 못했습니다. 방화 광구를 사용하여 DOM을보고 내 배열이 올바르게 채워지지만 img src가 설정되지 않았습니까?

Answer 1

예가 불완전합니다. 당신은 그래서, imageItem 생성자가하는 (그리고 생성자의 첫 번째 문자의 대문자를 사용하는 협약) 무엇을 표시해야합니다 :

function ImageItem(src) { 
    this.image = new Image(); 
    this.src = src. 
} 

여기에 작업을해야한다. 또한 글로벌로 imgArray를 원하는 것 같다, 그래서 하나를 선언

var imgArray; 

function initialize(){ 
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg"); 

배열 리터럴을 할당하는 것은 조금 더 쉽다 : 당신이하지 않는 이유

imgArray = [ new ImageItem(imageDir + "armory.jpg"), 
       new ImageItem(imageDir + "eddy.jpg"), 
       ... 
       new ImageItem(imageDir + "...") 
    ]; 
} 

var totalImgs = imgArray.length; 

내가 볼 수는 없지만 래퍼 함수를 ​​신경 쓰지 않고 직접 배열 리터럴을 할당하면됩니다. startImage 기능은 약간 정돈 할 수

function startImage(){ 
    document.getElementById("pic").src = imgArray[0].src; 
} 

액세스 소자 특성에 직접 (일부 브라우저에서 단점을 갖는다) setAttribute를 사용하는 것보다 더 입력 브라우저에서 신뢰할 이하이다.

Answer 2

이와 같이 자바 스크립트 기능을 수정하십시오.

function startImage(){ 

    document.getElementById("pic").src = imgArray[0].src; 
} 

Answer 3

여러 이미지를로드하면 다른 프로젝트에서 사용자에게 유용 할 수있는 기능처럼 들릴 수 있습니다.

var images = [ 
    'path/to/image1.png', 
    'path/to/image2.png', 
    'path/to/image3.png', 
    'path/to/image4.png', 
    'path/to/image5.png' 
]; 

function loadImages(imgArr, targetId){ 
    for(var i=0; i< imgArr.length; i++) { 
     console.log(imgArr[i]); 
     var img = new Image(); 
      img.src = imgArr[i]; 
     document.getElementById('output').appendChild(img); 
    } 
} 

loadImages(images); 

또한이 행해져 Yout 버튼에서 loadImage() 함수를 invode 수 있습니다 : 나는 이미지의 배열을 처리 할 수있는 기능을 만들고 DIV에 이미지 개체를 추가 할 제안

<button onclick="loadImages(images)">Start</button>