이미지 크기에 따라 콘텐츠 크기 조정

Question

페이지로드시 비어있는 div가 있지만 숨겨진 양식 배열 기능에서 이미지 목록이 동적으로 삽입됩니다. 이 이미지들은 모두 같은 높이가 아니지만 CSS와 jQuery를 사용하여 같은 높이로 만들었습니다.

컨테이너 div가 오른쪽 1 픽셀 여백의 이미지 목록만큼 넓어지기를 바랍니다. 이 코드는 작동하지만 하나 이상의 이미지가 누락 된 것처럼 보입니다. 따라서 너비가 올바르지 않습니다.

$(document).ready(function(){ 

$(function() { 
    var images = $("#itemDescription").val(); 
    var imageArray = images.split(','); 
    $.each(imageArray, function(index, value) { 
    var imageHtml = "<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />"; 
    $("#galleria-content").append(imageHtml); 
}); 

var accum_width = 0; 
var images = 0; 
var imagesactive = $('#galleria-container #galleria-content').find('img').length; 

$('#galleria-container #galleria-content').find('img').each(function() { 
    jQuery(this).height(584); 
    jQuery(this).width('auto'); 

    $(this).load(function(){ 
    var width = jQuery(this).width(); 
    var height = jQuery(this).height(); 
    accum_width += $(this).width(); 
    $('#galleria-content').width(accum_width); 
    }); 
}); 

    $('#galleria-container #galleria-content').find('img').fadeIn(); 

    }) 
}); 

난 그냥, 사업부에 이미지를로드 가변 폭 높은 584px을로 이미지 크기를 조정하고, 1 픽셀의 마진 오른쪽과 왼쪽 이미지를 떠 더 나은 해결책이 있는지 알고 싶어

; div 안에 포함되어야합니다. 너비는 모든 이미지와 여백의 합계입니다.

도움을 주셔서 감사합니다. 모두 최고

Answer 1

소리가 들리면 CSS로 원하는 것을 얻을 수있을 때 불필요한 DOM 조작을 많이하고 있습니다. 이미지를 { height: 584px; width: auto; display: block; float: left; margin: 0 0 0 1px; }으로 설정하고 포함 된 div에 overflow: hidden을 지정하면 플로팅 이미지로 깨어나는 데 충분합니다.

그런 식으로 JavaScript로 이미지를 추가하고 너비를 알아 내려고하지 않아도됩니다.

편집이 : 질문 코드의 정리 버전은 응답을

$(function() { 

    var images = $("#itemDescription").val().split(',') 
    , $container = $("#galleria-content") 
    , imgCount = images.length 
    , totalWidth = 0; 

    $.each(images, function(index, value) { 

    var $img = $("<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />"); 
    $img.load(updateWidth); 
    $container.append($img); 

    }); 

    function updateWidth() { 

    totalWidth += $(this).outerWidth(true); 
    imgCount--; 

    if (imgCount === 0) { // all images loaded 

     $container 
     .width(totalWidth) 
     .find('img') 
     .fadeIn(); 

    } 

    }; 

});