css高度调整后计算宽度

Question

我正在构建一个从 XML 中提取的水平图像页面 当图像加载时，它们会在屏幕高度上减去一个小值以留出一些空间。 我正在获取图像的宽度，以便将它们相加并设置 div 容器的宽度。 目前，总宽度是完整未调整大小的图像的大小，在最后一个图像的末尾留下一个空白区域。如何获取所有调整后图像的宽度？

这是我的代码

 <script>

 $(document).ready(function () {
$.ajax({
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: xmlParser
});

 });

function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
$(xml).find("image").each(function () {
    $url = $(this).attr("url");
    $(".main").append('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
    $(".image").fadeIn(1000);
    $widthb += $(".image").width();
});
$(".main").css('width', $widthb);
}

我正在处理的页面是http://www.spitznagel.ch/mobile.php

Answer 1

您可能只需为每个图像创建元素并在附加之前获取其大小。像这样的东西（未经测试的代码；希望你明白）

function xmlParser(xml) {
    var $heightb = $(window).height() - 45;
    var $widthb = 0;
    var imgDiv;
    var width;

    $(xml).find("image").each(function () {
        $url = $(this).attr("url");
        imgDiv = $('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
        $(".main").append(imgDiv);
        width = imgDiv.width();
        imgDiv.fadeIn(1000);
        $widthb += width;
    });
    $(".main").css('width', $widthb);
}