Question

我正在创建一个包含大型全屏图像的网站，水平滚动。为了获得整个内容的BODY宽度，我使用一个脚本来计算每个部分的宽度。这适用于前6个部分，但不适用于最后2个部分。

调试计算，我发现脚本似乎在第一部分之后就停止了。当然，它会在网站末尾的结束标记之前插入。

那里发生了什么？你能帮助我吗？它是否与图像的大小有关（自然宽度通常在4000-6000px之间）

这是我脚本的摘录：

setSectionHeight = function($windowHeight) {
    var $bodyWidth, $contentSection, $margins, $section, $sectionImage, $sectionWidth;
    $section = $("section");
    $contentSection = $('section.content');
    $sectionImage = $("section > img");
    $section.css({
      "max-height": $windowHeight - 20
    });
    $sectionImage.css({
      "max-height": $windowHeight - 20
    });
    $contentSection.css("height", $windowHeight - 80);
    $bodyWidth = 0;
    $sectionWidth = 0;
    $margins = 0;
    $section.each(function() {
      console.log("normal width: " + ($(this).width()));
      console.log("outer width " + ($(this).outerWidth()));
      $bodyWidth += $(this).outerWidth();
      return $margins += parseInt($(this).css("margin-right"));
    });
    $bodyWidth += $margins + 1;
    return setBodyWidth($bodyWidth);
  };

这是我使用的基本标记，没什么特别的：

<section>
    <img src="#IMAGE" />
</section>
<section>
    <img src="#IMAGE" />
</section>
<section>
    <img src="#IMAGE" />
</section>
// and so on (eight times)

这就是整个剧本：

(function() {
  var getContentWidth, getWindowHeight, setBodyWidth, setContentWidth, setSectionHeight;

  $(document).ready(function() {
    getContentWidth();
    return getWindowHeight();
  });

  getContentWidth = function() {
    var $contentWidth;
    $contentWidth = $(window).width();
    return setContentWidth($contentWidth);
  };

  setContentWidth = function($contentWidth) {
    var $content;
    $content = $('section.content');
    return $content.css({
      "width": $contentWidth - 80
    });
  };

  getWindowHeight = function() {
    var $windowHeight;
    $windowHeight = $(window).height();
    return setSectionHeight($windowHeight);
  };

  setSectionHeight = function($windowHeight) {
    var $bodyWidth, $contentSection, $margins, $section, $sectionImage, $sectionWidth;
    $section = $("section");
    $contentSection = $('section.content');
    $sectionImage = $("section > img");
    $section.css({
      "max-height": $windowHeight - 20
    });
    $sectionImage.css({
      "max-height": $windowHeight - 20
    });
    $contentSection.css("height", $windowHeight - 80);
    $bodyWidth = 0;
    $sectionWidth = 0;
    $margins = 0;
    $section.each(function() {
      console.log("normal width: " + ($(this).width()));
      console.log("outer width " + ($(this).outerWidth()));
      $bodyWidth += $(this).outerWidth();
      return $margins += parseInt($(this).css("margin-right"));
    });
    $bodyWidth += $margins + 1;
    return setBodyWidth($bodyWidth);
  };

  setBodyWidth = function($bodyWidth) {
    return $("body").css("width", $bodyWidth);
  };

  $(window).resize(function() {
    return getWindowHeight();
  });

  window.addEventListener("orientationchange", (function() {
    return getWindowHeight();
  }), false);

}).call(this);

非常感谢您提前！

Answer 1

你好christophe，因为你的宽度是原生的，你在文件就绪支架中执行你的计算，它可能在所有图像被加载之前执行（这可以解释它只发生在最后一次托管而且只在某个时候 - ＆gt;每次图片未加载且你的部分宽度= 0时。

所以如果你的剧本中没有其他错误你可以改变

 $(document).ready(function() {
    getContentWidth();
    return getWindowHeight();
  });

到

 $(window).load(function() {
    getContentWidth();
    return getWindowHeight();
  });

Javascript脚本在网站上提前停止计算

1 个答案: