这两天把轻图床转移到新浪 SAE 了,原本所在的 VPS 速度太不给力了,而且常抽风,因此早就有转移的打算了,只是一直不舍 VPS 的自由,不过最近一天几抽,于是不再犹豫了,果断转移之。
转移至 SAE 后网站加载速度给力多了,稳定性也有了很大的保证!不过原本的域名没有备案,因此绑定到 SAE 后服务器线路走的是美国路线,不停的 502 ,只能使用 SAE 的二级域名。
欢迎各种围观:http://lighthumbs.sinaapp.com/
移动版 http://lighthumbs.sinaapp.com/m/
在转移到 SAE 的过程中,修复了网站的一些 Bug ,主要是 PHP 方面之前使用了一些不推荐的 PHP 函数,这次全部改进了,另外就是瀑布流方面的 Bug 了。
在《瀑布流布局与 jQuery Ajax 分页》中, Kayo 提出了一种瀑布流布局的方案,最近有童鞋反映会出现一个 Bug —— 在翻页时有时会出现一片空白。
在解决这个 Bug 前不妨先了解一下 Bug 形成的原因——瀑布流布局采用的是滚动页面触发 Ajax 分页,判断滚动条滚动距离达到一定条件时触发,这样实际操作时便很容易触发多次的分页,而新追加的内容是通过 Masonry 的追加方法进行流体布局,因此只有最后一次 Ajax 获得的内容会有流体布局,其他内容便会移位造成空白。
接下来就是 Bug 的解决方案,既然 Bug 形成是因为触发了多次 Ajax 分页,因此可以在触发了一次 Ajax 请求后便禁止滚动触发分页,改进后的完整分页代码如下(代码是根据《瀑布流布局与 jQuery Ajax 分页》文中的瀑布流布局代码改进的,完整的布局原理和代码参见前文):
// 初始化 sentIt var sentIt = true; nextHref = $("#next_page a").attr("href"); // 给浏览器窗口绑定 scroll 事件 $(window).bind("scroll",function(){ // 判断窗口的滚动条是否接近页面底部,加入 sentIt 判断,当触发一次 Ajax 分页时把 sentIt 设为 false,禁止触发多余的 Ajax 请求 if( $(document).scrollTop() + $(window).height() > $(document).height() - 30 && sentIt ) { // 判断下一页链接是否为空 if( nextHref != undefined ) { // 显示正在加载模块 $("#page_loading").show("slow"); // Ajax 翻页 $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", beforeSend: function(){sentIt = false; }, // 触发了一次 Ajax 分页时把 sentIt 设为 false success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); // 把新的内容设置为透明 $newElems = result.css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); // 渐显新的内容 $newElems.animate({ opacity: 1 }); // 隐藏正在加载模块 $("#page_loading").hide("slow"); }); }, complete: function(){setTimeout(sentIt = true, 600); } // 完成 Ajax 请求后重新设 sentIt 为 true }); } else { $("#page_loading span").text("木有了噢,最后一页了!"); $("#page_loading").show("fast"); setTimeout("$('#page_loading').hide()",1000); setTimeout("$('#page_loading').remove()",1100); } } });
测试改进后的瀑布流布局可以到轻图床首页。
2013/12/23 更新
轻图床已经全新改版,去掉原有的瀑布流布局,需要参考原有的瀑布流布局效果可以浏览这个另外制作的 Demo(只保留瀑布流翻页和第一张图片的链接,其他的功能入口已经去掉)。
本文由 Kayo Lee 发表,本文链接:https://kayosite.com/lighthumbs-transfer-to-sae-and-improve-cascade-layout.html
评论列表