轻图床转移至 SAE 与优化瀑布流布局

这两天把轻图床转移到新浪 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 发表,本文链接:http://kayosite.com/lighthumbs-transfer-to-sae-and-improve-cascade-layout.html

评论列表

  • 评论者头像
    回复

    第一篇很給力 很亮眼
    很是喜歡啊
    她還算嫩模嘛?

    • 评论者头像
      回复

      @沫 这个就得问问waphe.com了,他上传的图 :mrgreen:

  • 评论者头像
    回复

    果断看不懂,javascript是弱点,果断补习啊。
    还有,不知道为什么,好像是我们学校网络不行,疑似被攻击,很多网站都打不开,不稳定,你文章里面的那俩也打不开。

    • 评论者头像
      回复

      @潜行者m 是真的被攻击,最近基本所有国外的服务器都有间断打不开的问题,电信在干活,你懂的!

  • 评论者头像
    回复

    右侧一大片的空白啊,文字内容都集中到左侧了

    • 评论者头像
      回复

      @Louis Han 这样才能突显主要的内容噢,之前的主题右侧边栏也有很多内容,不过根据谷歌分析的反映,很少人会点击侧栏的链接,所以这次果断弱化侧栏的功能!

  • 评论者头像
    回复

    sae长期使用要¥吧

    • 评论者头像
      回复

      @zwwooooo 用原创作品申请个中级开发者,每月1W云豆,问题马上解决!

  • 评论者头像
    回复

    求救,用d:\www\index.html这样访问正常,用127.0.0.1/index.html访问却一直显示“图片加载中” :cry:

  • 评论者头像
    回复

    额,ajax加载后的内容和之前的内容中间空了好多喔, :-o

    • 评论者头像
      回复

      @小邪 之前的版本才会这样的啊,这文章就是介绍修复这个Bug的,你强制刷新试试!

  • 评论者头像
    回复

    表示加载有点慢的说。

    • 评论者头像
      回复

      @Demon 毕竟是图床,肯定比普通网站慢点了,不过现在转移到sae上,速度已经好多了!

  • 评论者头像
    回复

    不错,有自己的风格 :idea:

  • 评论者头像
    回复

    亲,能提供一下主题包吗?

  • 评论者头像
    回复

    好漂亮哦。真的很轻哈

  • 评论者头像
    回复

    简洁大方,精细美观,好看…… :wink:

  • 评论者头像
    回复

    你好,为什么我用上之后翻页不是新的数据追加至当前页面的尾部,而是重新加载第二页的内容?而且当前页拉到尾部的时候总是出现已经是最后一页,而事实上后面还有啊? :cry:

    • 评论者头像
      回复

      @toppai 你好,这样的问题应该是你的ajax url设置不正确,要不你把相关的代码(html,js)发到我邮箱研究一下吧!

1 2 3

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O