Question

在我的rails应用中我试图实施砌体。我遇到的问题是，当我点击链接（图像）时，砌体不起作用，但是如果你点击后刷新页面就可以了。有任何想法吗？感谢

这是网站：https://salty-waters-72129.herokuapp.com/images

代码：

<p id="notice"><%= notice %></p>
<head>

<script src="/assets/jquery.swipebox.js"></script>
<link rel="stylesheet" href="/assets/swipebox.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

 <link rel="stylesheet" href="/assets/responsive.css" media="screen and (max-width: 900px)" charset="utf-8">

</head>
<body>
<h1>Listing Images</h1>

 <div id='masonry'>
  <% @images.each do |image| %>
   <%= link_to image.image_url.to_s,class: "swipebox" do %>
    <div class="hov col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
        <%= image_tag image.image_url.to_s, :class => "img-responsive" %>
          <div class="overlay">
            <h2><%= image.name %></h2>
        </div>
      </div>
    </div>
  <% end %>
<% end %>
</div>
<script src="/assets/masonry.pkgd.min.js"></script>
</body>

<script type="text/javascript">
 $(window).load(function() {
  var container = document.querySelector('#masonry');
   var msnry = new Masonry( container, {
     columnWidth: '.hov',
     itemSelector: '.hov'
   });
  });
;( function( $ ) {
    $( '.swipebox' ).swipebox();
} )( jQuery );
</script>

Answer 1

问题不在于砌体，而是在点击$(window).load(...)时Images块不起作用。

这是因为Images链接点击是使用javascript处理的，并且它不会导致整页重新加载，因为它会向服务器发出ajax请求并替换页面内容。这种方式$(window).load()不会被触发。

检查您的js application code，ajax请求是从fetchReplacement = function(url, onLoadFunction, showProgressBar) {...阻止发送的。

看起来此代码属于turbolinks.js，here与您拥有的代码相同。

如果你真的不需要这个turbolinks库 - 只需删除它就可以解决问题。如果你需要它 - 检查它的文档，你应该能够订阅页面加载事件（它在ajax响应处理程序中执行return triggerEvent(EVENTS.LOAD)）并初始化那里的砌体。

单击url后，砌体无法正常工作

1 个答案: