Question

我一直试图让这个工作在过去的一个小时里，我完全陷入困境;以下仅返回第一个子节点的宽度，其余子节点在记录时返回宽度“0”。

JS

function getWidth() {
    var $item = $('#image-inner-wrap .project-item'),
        width = 0;

    $item.each(function() {
        width += $(this).width();
    });

    return width;
}

HTML 最后三个元素是imgs：

<section id="image-wrap">
    <div id="image-inner-wrap">
        <div id="client-title" class="project-item">
            <h1>Ink</h1>
        </div>
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
    </div>
</section>

CSS

#image-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90%;
    padding: 60px 60px 60px;
    box-sizing: border-box;
    z-index: 10;
}
#client-title, 
#image-wrap img {
    float: left;
    height: 100%;
    margin-right: 60px;
}
#client-title {
    display: table;
    width: 12%;
}
#client-title h1 {
    display: table-cell;
    vertical-align: middle;
    font-size: 60px;
    text-align: center;
}
#image-inner-wrap {
    height: 100%;
}

我原本以为这可能是因为图像的加载速度不够快，但即使使用setTimeout包装每个函数它也无法正常工作。有什么指针吗？

Answer 1

加载HTML文档并准备好DOM时，

$(function)执行。此时可能不一定要加载图像，尤其是您在此处引用的大图像。

$(window).load在页面完全加载时执行，包括所有帧，对象和图像。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <section id="image-wrap">
        <div id="image-inner-wrap">
            <div id="client-title" class="project-item">
                <h1>Ink</h1>
            </div>
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    function getWidth() {
        var $item = $('#image-inner-wrap .project-item'),
            width = 0;
        $item.each(function() {
            width += $(this).width();
        });
        return width;
    }
    $(window).load(function() {
        getWidth();
    });
    </script>
</body>
</html>

您还可以包含图像的宽度和高度属性，这将迫使浏览器在加载图像之前渲染所有内容。在图像加载时，将保留每个图像所需的空间。

Answer 2

代码似乎在chrome 41中对我有用。

添加了一个按钮来运行代码并将其文本设置为宽度。

尝试一下：

function getWidth() {
  var $item = $('#image-inner-wrap .project-item'),
    width = 0;

  $item.each(function() {
    width += $(this).width();
  });

  return width;
}

$(document).ready(function() {
  $('.calcwidth').click(function() {
    $(this).html("Widht of your elements is: " + getWidth());
  });
});

#image-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90%;
  padding: 60px 60px 60px;
  box-sizing: border-box;
  z-index: 10;
}
#client-title,
#image-wrap img {
  float: left;
  height: 100%;
  margin-right: 60px;
}
#client-title {
  display: table;
  width: 12%;
}
#client-title h1 {
  display: table-cell;
  vertical-align: middle;
  font-size: 60px;
  text-align: center;
}
#image-inner-wrap {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="calcwidth">TEST!</button>

<section id="image-wrap">
  <div id="image-inner-wrap">
    <div id="client-title" class="project-item">
      <h1>Ink</h1>
    </div>
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
  </div>
</section>

获取div的子宽度来创建水平滑块

2 个答案: