Rails Masonry 插件的

hxygsh · 2015年12月17日 · 最后由 hxygsh 回复于 2015年12月23日 · 2789 次阅读

做个 rails 网站基本都是静态页面 用的 bootstrap 框架 打开网页首次进入非要刷新下才实现 Masonry js 插件 图片对齐效果 什么原因啊 有人用过吗 ?

慎用turbolinks

不上代码,不好判断啊

去掉了turbolinks还是不行,网上有在<head> </head> 加入一段 js 脚本刷新一次,可是都有问题啊,没能用的,还有的是定时刷新更用不了,谁有靠谱的办法啊。 觉得是图片太多 读取 CSS 样式表或 JS 插件时卡死了,不知道哪里问题。

你可以用这个 Gem masonry-rails.

然后,如一楼所说,这是一个 turbolinks 导致的问题。

你需要用到ready page:load来使你的 js 代码被正确读取到,一个例子如下:

$(document).on 'ready page:load', ->
  $ ->
    $('#products').imagesLoaded ->
      $('#products').masonry
        itemSelector: '.box'
        isFitWidth: true

当然,你也可以用这个 Gem jquery.turbolinks 来解决你所遇到的 “必须要刷新页面” 才能正常读取到各类 jQuery 插件的问题。

5 楼 已删除

用了这个 gem jquery.turbolinks 还是不行啊,能帮助再看下吗?

 <title>SarahTree</title>
   <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap-theme.min.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/main.css?body=1" media="all" rel="stylesheet" />
   <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/main.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/plugins.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
   <meta content="authenticity_token" name="csrf-param" />
<meta content="/QFnI8CwuvSRa7CqIQdBNBr6LGNk/EVhXRetmxfPN2Q=" name="csrf-token" />

js 加载规划

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require_tree . 
//= require turbolinks

用了笨办法临时解决了 加了段脚本,就是网址变得怪异了,连接到其他网页再退回来也有问题,凑合先用着,慢慢研究一下要。

<Script>
function reurl(){

url = location.href; 

var times = url.split("?"); 
if(times[1] != 1){
url += "?1";

self.location.replace(url); 
}
}

onload=reurl

</script>  

上面的方法都试了下,没解决;最近又看了看 网上资料 觉得真不是turbolinks 的问题,原因有可能在于 Masonry 插件在图片未读取完毕前就完成了 自动对齐,这样重新涮新一次时由于缓存里有了这些图片,加在时间少了,也就正常了。

那么怎么控制让图片加载完毕再进行下一步渲染,可能需要用到 jquery 手动进行了,简单用 HTML 难以实现,再学习下 离最终目标近了一步了。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号