画像のサイズに応じてコンテンツのサイズを変更します

Question

ページの読み込み時にdivが空ですが、画像のリストが隠れたフォーム配列関数から動的に挿入されています。これらの画像はすべて同じ高さではありませんが、私はそれらをcssとjQueryを使って同じ高さにしました。

私は、コンテナdivが1pxの右余白を持つイメージのリストと同じ幅であることを希望します。このコードは機能しますが、少なくとも1つの画像が欠落しているように見えるので、幅が正しくありません。私はちょうど可変幅と高584pxこと、および1ピクセルのマージン右と左の画像をフロートする画像のサイズを変更し、DIVに画像をロードするためのよりよい解決策があるかどうかを知りたい

$(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(); 

    }) 
}); 

。 div内に含まれる必要があります。幅はすべての画像とマージンの合計です。

お手数をおかけしていただきありがとうございます。 すべて最高

Answer 1

あなたは、その音で、あなただけのCSSで望みを達成することができるときに不必要なDOM操作をしています。画像を{ height: 584px; width: auto; display: block; float: left; margin: 0 0 0 1px; }に設定し、含まれているdiv overflow: hiddenに浮動画像まで目を覚ますことで十分です。

JavaScriptを使用してイメージを追加するだけで、幅を把握することを心配する必要はありません。

EDIT：質問コードのクリーンアップバージョンは返信用

$(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(); 

    } 

    }; 

});