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);
}

css高度调整后计算宽度

1 个答案: