做个 rails 网站基本都是静态页面 用的 bootstrap 框架 打开网页首次进入非要刷新下才实现 Masonry js 插件 图片对齐效果 什么原因啊 有人用过吗?
去掉了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 插件的问题。
用了这个 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 难以实现,再学习下 离最终目标近了一步了。