글리치 JavaScript

Question

저는 웹 디자인 및 프로그래밍과 관련하여 매우 새롭습니다. JavaScript를 사용하여 간단한 갤러리를 만들고 있습니다. jQuery를 사용하는 것이 매우 쉽다는 것을 알고 있습니다. 그러나 나는 그것을 사용할 수 없다 (과제).

여기서 문제가되는 코드이다 : ID의 H0와

var img = new Array(); //declared globally, accessed by other functions 
function displayImage(){ 

var img_num = document.getElementById('img_num').getAttribute("value"); 

for(j=0;j<img_num;j++) 
    img.push(document.getElementById('h'+j).getAttribute("value")); 


var list_width = 0; 
for(var i=0;i<img_num;i++) 
{  
    document.getElementById('list_holder').innerHTML += "<img src='" +img[i]+ "'onclick=\"show(this.id);\" height = \"70%;\"id='"+i+"'/>"; 
    list_width += document.getElementById(i).offsetWidth + 15; 
} 

document.getElementById('list_holder').style.width = list_width+"px"; 
return false; 
} 

요소, H1, H2 ... 등의 화상의 경로 및 ID의 0,1을 포함 입력 유형 숨김, 2 ..는 태그입니다.

img.push을 사용하여 img 배열에 경로를 저장하기 위해 JS에서 사용하고 있습니다. 그런 다음 배열의 값을 사용하여 정확히 <img> 태그를 여러 개 만들었습니다 (높이를 지정하고 가로 세로 비율을 결정하기 위해 너비를 남겨 둡니다.) 이제 전체 부모의 div을 계산해야합니다. 내가 list_width+=document.getElementById(i).offsetWidth를 사용하여 생각 때문에 이러한 img 태그 'list_width').

하지만 내가 처음으로 페이지를 열 때, 실제 폭이 반환되지 않는되어 일어나는. 그것은 4을 반환, 기본적입니다 분 페이지 너비를 생각했다. 예상대로 작동하는 페이지를 새로 고치기. 내가 그것을로드 한 후 한 번만 페이지 새로 고침을 통해 해결 방법을 사용할 수 있지만 알고 싶습니다 '원하는'또는 ' 전문적인 방법으로.

미리 감사드립니다.

Answer 1

당신은이 이미지가로드 될 때까지 대기합니다. 당신은 Javascript를 처음 사용하지만 이미 비동기 프로그래밍을해야합니다. 코멘트에서 보자 :

var img = []; // faster to type, use this syntax if you 
       // don't define an initial length 
function displayImage() { 
    // The attribute value defines the initial value of the input element, and 
    // it may differ from the actual value. So use the value property, not the 
    // attribute. 
    var img_num = document.getElementById('img_num').value; 

    for(var j=0; j<img_num; j++) // Watch out, without var j is global! 
     img.push(document.getElementById('h'+j).value); 


    var list_width = 0, 
     // We're referincing this element a lot, better store it 
     lholder = document.getElementById('list_holder'), 
     htmllist = []; // See the trick 
    for(var i=0; i<img_num; i++) 
     htmllist.push("<img src='" +img[i] 
      + "'onclick=\"show(this.id);\" height = \"70%;\"id='"+i+"'/>"); 

    // Every time you set innerHTML, using = or +=, the browser has to parse 
    // the code and rebuild the content, and it's an expensive task. Set this 
    // property only once you already computed all the HTML you need. 
    lholder.innerHTML = htmllist.join(""); 

    var loaded = 0; 
    for(var i=0; i<img_num; i++) 
     // You don't know when the images will be loaded. But when an image is 
     // loaded, it triggers the load event that you can listen setting the 
     // onload property (or, in a more modern way, setting an event listener 
     // with addEventListener or attachEvent in older IE). Count the images 
     // that are loaded, and when they're all loaded do your stuff. 
     lholder.childNodes[i].onload = function() { 
      if (++loaded < img_num) return; 
      for(var i=0; i<img_num; i++) 
       list_width += lholder.childNodes[i].offsetWidth; 
      lholder.style.width = list_width + "px"; 
     }; 

    return false; 
} 

Answer 2

이 줄에 문제가 :

for(var i=0;i<img_num;i++)  
    document.getElementById('list_holder').innerHTML += "<img src='" +img[i]+ "'onclick=\"show(this.id);\" height = \"70%;\"id='"+i+"'/>"; 
    list_width += document.getElementById(i).offsetWidth + 15; 

당신은 컬리는 단지 루프의 첫 줄을 실행이로 변경됩니다 중괄호가 없기 때문에 :

for(var i=0;i<img_num;i++){  
    document.getElementById('list_holder').innerHTML += "<img src='" +img[i]+ "'onclick=\"show(this.id);\" height = \"70%;\"id='"+i+"'/>"; 
    list_width += document.getElementById(i).offsetWidth + 15; 
} 

Answer 3

앞서 언급했듯이, 이미지를로드하기 전에 속성을 쿼리해야합니다. 여기 무슨 일이 일어나고 있는지의 예가 있습니다. jsfiddle

추가에

img { 
    width: 50px; 
    height: auto; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
} 
img:hover { 
    width: 300px; 
} 

<div id="display" class="main"></div> 

var display = document.getElementById("display"), 
    images = { 
     "F12berlinetta": "http://www.ferrari.com/Site_Collection_Image_115x55/f12_thumb_home_115x55.png", 
      "458 Spider": "http://www.ferrari.com/Site_Collection_Image_115x55/110823_458_spider_menu.png", 
      "FF": "http://www.ferrari.com/Site_Collection_Image_115x55/ff_thumb_home_115x55.png", 
      "458 Italia": "http://www.ferrari.com/Site_Collection_Image_115x55/458_italia_menu_1_dx_ok.png", 
      "Ferrari California": "http://www.ferrari.com/Site_Collection_Image_115x55/california_menu_3_sx.png" 
    }, 
    keys = Object.keys(images), 
    loaded = 0, 
    menuWidth = 0, 
    noWaitWidth = 0; 

function clickedIt(evt) { 
    alert("You chose the " + evt.target.title); 
} 

function onLoaded(evt) { 
    loaded += 1; 
    menuWidth += evt.target.offsetWidth; 
    evt.target.addEventListener("click", clickedIt, false); 
    if (loaded === keys.length) { 
     console.log("Waited load width", menuWidth); 
    } 
} 

keys.forEach(function (key, index) { 
    var newDiv = document.createElement("div"), 
     newImg = document.createElement("img"); 

    newImg.id = "thumb" + index; 
    newImg.src = images[key]; 
    noWaitWidth += newImg.offsetWidth; 
    newImg.title = key; 
    newImg.addEventListener("load", onLoaded, false); 

    newDiv.appendChild(newImg); 
    display.appendChild(newDiv); 
}); 

console.log("Didn't wait load width", noWaitWidth); 

: 그 당신이 무슨 뜻인지 경우이는 자바 스크립트 방식으로 표준의 문서에 HTML 이미지 태그를 배치합니다. 당신이 이해하지 못하는 것을 묘사하지 않으면, 어떤 설명을 단순화하기가 어렵습니다. 이미지 제목과 URL을 보유하는 객체가 있습니다. 객체를 순환하여 제목과 함께 문서에 이미지를 배치하고 잘못된 이미지 너비를 얻습니다. 이미지가로드 될 때까지 기다리는 이벤트 리스너를 설정하는 각 이미지에서 올바른 이미지 너비를 얻습니다. 각 이미지에서 클릭 리스너를 설정하여 클릭 한 이미지에 대한 경고를 제공합니다. CSS는 표준 호버 방법을 보여 주므로 이미지 위로 이동하면 이미지가 확대됩니다.