轻图床转移至 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 发表,本文链接:https://kayosite.com/lighthumbs-transfer-to-sae-and-improve-cascade-layout.html

评论列表

  • 评论者头像
    回复

    complete: function(){setTimeout(sentIt = true, 600); }

    这句firefox下报错了哦~

    complete: function(){
    setTimeout(function(){sentIt = true;},600);
    }

  • 评论者头像
    回复

    这个真不错。哈哈哈。特别是还有移动版。

  • 评论者头像
    回复

    奇了怪了,还是会有这个bug,难道我哪里写错了,还是会同时加载两次ajax同一个内容的,博主,求解?

  • 评论者头像
    回复

    博主我又来了,刚才试了下,在FF还是不行,还有在ie,会提错’jQuery.event.handle’ 为空或不是对象?但是在猎豹浏览器就没有问题,这是怎么回事呢?

  • 评论者头像
    • 评论者头像
      回复

      @相聚一刻 之前的移动版的不配合新的桌面版的风格了,并且收到 Spamer 的骚扰,所以重新设计了一个移动版,准备上线了!

  • 评论者头像
    回复

    这个ajax无刷新分页在iphone上的Safari浏览器无效 其他的浏览器都没问题 这个有什么解决方法吗?

  • 评论者头像
    回复

    怎么我Ajax加载不了,一拉到下面就是最后一页了

    下一页

    这个链接应该没有问题吧 可以给你的邮箱或者QQ我吗 我想详细问下你

  • 评论者头像
    回复

    移动版还是打不开呢, 什么时候上线?期待ing

  • 评论者头像
    回复

    两年后回来找竟然还在 给弟弟看学习思路 感谢博主 :-|

  • 评论者头像
    回复

    你好,看到这篇文章..真是我要实现的功能.我看到你讲解前台滚动加载javascript很详细,
    但是后台php的分段获取数据却没有详细讲解..
    能否写一个小例子 摆放在博文里 提供下载,方便阅读学习理解代码!
    我现在就是对php后台处理数据这块不明白.望你能指点一二!不甚感激!

  • 评论者头像
    回复

    很喜欢你的个人站前端,能给代码看看吗,如果可以发我邮箱,谢谢!

  • 评论者头像
    回复

    你好,用了您的代码,加载效果很不错,不过有一个问题,一直向下滚动的话会一直加载,比如我又5页。加载完5页还会再加载,看代码显示加载的是第一页。请问这个是什么原因呢,是我哪里有问题么

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail