Question

我之前使用过这个javascript片段创建了一堆divs，但之前从未遇到过这个问题，但由于某些原因，代码在我刷新页面之前一直没有运行。这是一个示例实例：

<div class="container">
  <div class="row text-center">

    <%= link_to "http://www.manlyartofbbq.com" do %>
      <div class="col-sm-6 col-md-4">
        <div class="site-preview-box">
          <h2>WIP: Manly Art of BBQ</h2>
          <h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
          <%= image_tag 'portfolio_mab.png', class: "portfolio-image" %>
          <p><a href="www.manlyartofbbq.com">The Manly Art of BBQ</a> is a humorous website that gives information on a variety of "manly" topics.</p>
          <p><strong>This site has a vast array of user-submitted content sorted in a Reddit-like fashion, as well as a few online "tools" that were a lot of fun to develop.</strong></p>
        </div> <!-- site preview box -->
      </div> <!-- column box -->
    <% end %>

    <%= link_to "http://www.ocoutreach.com" do %>
      <div class="col-sm-6 col-md-4">
        <div class="site-preview-box">
          <h2>WIP: OC Outreach</h2>
          <h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
          <%= image_tag 'portfolio_oco.png', class: "portfolio-image" %>
          <p><a href="www.ocoutreach.com">OC Outreach</a> is a non-profit community organization that operates in the Orange County area.</p>
          <p><strong>This was a fairly simple site functionality-wise, but it was cool to design every aspect of a site (logos, design, etc.) from the ground up.</strong></p>
        </div> <!-- site preview box -->
      </div> <!-- column box -->
    <% end %>


  </div> <!-- row -->

</div> <!-- page container -->


<script>
  $( document ).ready(function() {
      var heights = $(".site-preview-box").map(function() {
          return $(this).height();
      }).get(),
      maxHeight = Math.max.apply(null, heights);
      $(".site-preview-box").height(maxHeight);
      window.onresize = function(){ location.reload(); }
  });
</script>

而不是同等高divs，我最终得到了这个：

然后，当我点击刷新（有时需要多次刷新）时，它会更正：

关于如何在刷新页面之前使其工作的任何想法？

附加信息 this question的答案并未解决这个问题。我尝试用load代替ready，它会使javascript无法正常运行。

Answer 1

在所有图片加载完毕后，显示divs。重新加载时div是正确的大小，因为此时所有图像都由浏览器缓存，JavaScript可以获得适当的大小。

在jquery中将ready更改为：

$(window).on("load", function() { // weave your magic here. });

应该修复它。如果没有。

这样的事情应该有助于作为一个粗略的例子。

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg"

Answer 2

您可以为图像指定css宽度和高度。所以盒子看起来总是如你所愿。在您的情况下，浏览器首次缓存图像，然后由于从浏览器缓存中读取图像，它们会在第二次出现修复。

Javascript直到刷新才运行

2 个答案: