JavaScript에서 여러 이미지 객체 만들기

Question

JavaScript로 프로그래밍 중이며 여러 이미지 객체를 만드는 데 '최상의'방법이 있는지 알고 싶습니다. 아래 코드를 예로 들어 보겠습니다. 첫 번째 방법을 수행하는 다른 방법이 있는지

var a = new Image(), b = a, c = a; 

난 그냥 궁금 해서요 ...

var a = new Image(); 
var b = new Image(); 
var c = new Image(); 

그것을 할이 유일한 방법인가, 또는 뭔가 같은 작업을 수행해야합니다. 내 프로그램에 더 많은 'new Image()'변수가 포함되어 있고 반복적 인 코드가 좋지 않다고 생각합니다.

Answer 1

다른 Image 개체를 가리키는 별도의 변수 더미로 네임 스페이스를 오염시키는 대신 배열로 빌드하는 것이 좋습니다.

var imgs = []; 
var numImgs = 10; 
// In a loop, build up an array of Image objs 
for (var i=0; i<numImgs; i++) { 
    imgs.push(new Image()); 
    // Initialize properties here if necessary 
    imgs[i].src = 'http://example.com'; 
} 
// imgs now holds ten Image objects... 
// Access them via their [n] index 
img[3].src = 'http://stackoverflow.com'; 

여러 변수를 만드는 것보다 효과적 일 수는 없지만 정리를 유지하는 것이 더 쉽습니다. 초기화시 몇 줄의 코드를 저장하지만 장기적으로는 미세 최적화에 그치며 그 효과는 무시할 정도입니다.

각 Image에 대한 텍스트 설명자를 실제로 사용하려면 대신에 {} 개체를 사용하고 속성을 작은 설명 문자열로 설정할 수 있습니다. 당신은 배열을 통해 초기화도 수 : 이것은 PHP 또는 Perl 연관 배열처럼 동작하는 객체의 오용에 약간의 국경

var imgNames = ['stackoverflow','google','example']; 
var imgs = {} 
// Initialize object properties in a loop 
for (var i=0; i<imgNames; i++) { 
    // Initialize a property in the object from the current array value using [] notation 
    imgs[imgNames[i]] = new Image(); 
} 
// Then you can access them by their property name: 
imgs.google.src = 'http://www.google.com'; 
imgs.stackoverflow.src = 'http://stackoverflow.com'; 

하지만 오히려 이름을 필요로하는 경우 이미지에 쉽게 액세스를 제공합니다 위의 배열 메서드에서와 같이 숫자 키보다

Answer 2

귀하의 질문을 올바르게 이해하고 있는지 잘 모르겠습니다. 3 개의 변수를 코드가 필요하다면 전혀 다른 세 가지 변수로 선언하는 것은 잘못된 것이라고 생각하지 않습니다. 사실, 나는 그것을 매우 유용하게 생각한다. 왜냐하면 그것은 내 생각에 코드를 더 읽기 쉽게 만들어주기 때문이다. 당신이 다소 다른 당신이 시도 할 수 일을 설정하는 경우

그러나 :

var a = new Image(), b = a.cloneNode(true), c = a.cloneNode(true);

나는이 비록 매우 읽을 생각하지 않습니다.

코드에서 허용하는 경우 선호하는 방법 인 목록에서 초기화 할 수도 있습니다.

var images = []; 
for(var index = 0; index < 10; index++) { 
    images.push(new Image()); 
} 

Answer 3

번째 방법은 동일한 이미지이다.

당신이 말할 경우 :

b = a; 
c = b; 

그리고 a 경우

다음, b 객체이며 c가 동일한 개체를 가리 단지 참조입니다.

이미지를로드하는 기능은 어떻습니까?

function loadImage(name, optionalCallback) { 
    var img = new Image(); 
    if (typeof optionalCallback === "function") { img.onload = optionalCallback; } 
    img.src = name; 

    return img; 
} 

그런 다음 당신은 말할 수 :

var a = loadImage("images/image01.png", function() { document.body.appendChild(this); }), 
    b = loadImage("images/image02.jpg", function() { gallery.addImage(this); }); 

당신이 함께 할 수있는 더 많은있다, 당신이 함께 더 얻을 때 - 당신이 Promises와 이것 저것에 얻을 때, 당신은 끔찍한 작업을 수행 할 수 있습니다 그 이미지들로 가득 차 있습니다.

는 또한, 당신은 당신과 같은 프로그램을 작성하는 경우주의해야 할 수 있습니다 :

, 당신은 페이지에 이미지를 추가하는 코드의 일부에 도착하면

var a = new Image(); 
a.src = "images/image01.jpg"; 
document.getElementById("gallery").appendChild(a); 

, 이미지로드가 완료되기 전에 예기치 않은 결과가 발생할 수 있습니다.