博客建设

网站架设学习中遇到的点点滴滴

WordPress安装Memcached缓存加速 博客建设

WordPress安装Memcached缓存加速

内存缓存Memcached可以突破MySQL性能瓶颈,加速博客的访问。 安装Memcached拓展 Memcached是php的一个拓展,类似的拓展还有Memcache。少了一个d的是旧版,多了一个d是新版。新版有更好的性能,推荐安装。 我使用的是lnmp一键安装包,这里面就附带了上述两个拓展的源码。进入lnmp解压后的目录,执行: 输出: 这里选择2即可。 安装wordpress-pecl-memcached-object-cache WordPress官网上的object-cache.php虽然也号称Memcached 插件,然而它只支持Memcache,不支持新版的,所以不能使用。如果错误地将object-cache.php和Memcached混用的话,则会出现WordPress打不开,前台后台页面一片空白的现象。 跟Memcached配套的WordPress插件在https://github.com/tollmanz/wordpress-pecl-memcached-object-cache,下载后上传到wp-content即可,此时memcached就生效了。 安装batcache插件 batcache可以将整个页面缓存到内存中,下次直接从内存中取出html,完全不需要计算,所以速度非常快。下载解压后其实只有advanced-cache.php是有用的,而batcache.php是一个提供情况缓存的GUI入口,并无大用。 其中advanced-cache.php有一些自定义的选项可供配置: max_age代表缓存寿命(以秒为单位),times表示访问多少次才创建缓存(2是最小值),seconds表示在多少秒之后才创建缓存(0表示立即)。 之后将advanced-cache.php上传到wp-content即可。 要开启缓存的话,还需要编辑wp-config.php: 当然,只有游客才能享受到加速。 查看Memcached命中率 有时候我们想看看Memcached的加速效果,这时候可以利用官网上的一个工具: http://pecl.php.net/get/memcache-3.0.8.tgz 解压后提取memcache.php上传到服务器,访问后即可看到缓存效果:
WordPress 文章信息批量修改 博客建设

WordPress 文章信息批量修改

你是否遇到过如下几种状况: 博客更换域名,博客文章的内容也要跟着换 使用的图片地址更换了 写了很多文章,回过头来想切换作者 想删除某个可恶留言者的所有留言 想更改某个留言者所有留言的网站URL 想要禁用所有文章的pingback 想要禁用所有文章的评论功能所有的这些,都涉及到一个关键词:批量修改。如果在WordPress后台,手动地去一个一个修改文章内容,相信会让你很抓狂,对一些拥有上千篇文章的博客来说,几乎是不可能完成任务。本文将教你如何使用SQL语句来操作你的数据库,实现数据的批量修改。如果你没学过数据库的相关知识,肯定不知道SQL是什么,但是本文所涉及到的内容不需要你了解数据库的知识,也不需要你精通SQL语句的编写,你完全可以直接使用本文提到的SQL,下面我们将分条介绍各个SQL语句的功能,所有语句都使用默认的 wp_ 表前缀,如果你的不是,请自行更改。开始之前,先介绍以下如何执行SQL语句,进行批量操作。现在一般的空间都是用phpmyadmin来管理数据库,这里将以phpmyadmin为例来介绍如何执行SQL语句: 进入你的phpmyadmin管理页面,然后进入你的博客对应的数据库 菜单栏有个 SQL 选项,点击进去 出现一个SQL语句的输入框,现在你就可以在里面输入SQL语句了 输入完毕,点击 执行 ,将执行你刚才输入的SQL语句 SQL语句执行完毕,你的文章也被批量修改了,现在去看看你的文章是否都被更改了 最后提个醒:以下介绍的SQL语句都在我的博客上做过测试,但是尽管如此,操作数据库之前都要先备份一下你的数据库;定期备份你的数据库是好习惯 SQL命令执行窗口: 1、批量修改文章内容: 如果你想替换之前写过的所有文章中的某些内容,如更换博客的名称,更换博客的网址,更换文章配图的链接等等,你可以使用以下SQL语句: 该语句的功能是将所有文章中的 露兜博客 字眼,全部替换成 露兜中文博客,你可以根据需要做一些更改。因为文章内容在数据库中是以HTML代码形式存储的,所以以上SQL语句同样可以替换HTML代码。如果你只是想更改文章插图的链接,而不想影响其他的链接,可以使用以下SQL语句,所有src="oldurl.com被替换成了src="newurl.com 如果你是以图片附件形式上传的话,需要更改图片附件的GUID 2、批量修改文章摘要: 文章摘要就是你在WordPress后台编辑文章时,"摘要"框中输入的内容,如果你想批量更改文章摘要,可以使用以下语句: 该语句的功能是将所有文章摘要中的 露兜博客 字眼,全部替换成 露兜中文博客。 3、批量修改文章的作者: 假设你的博客有两名注册用户,张三和李四,你想将张三的所有文章划归到李四名下,这时候该怎么办呢?你可以执行以下语句: 那如何获得 李四的用户id 和 张三的用户id 呢?你可以执行以下SQL语句: 这时将列出你博客上所有的注册用户的ID,昵称和公开显示的名称,你现在就可以找到对应用户的ID了,如下图,zhangsan的ID为2,lisi的ID为5: 你的SQL就可以这样写了: 4、批量修改文章评论者的网站URL: 假设,你的博客有个非常忠实的读者,给你的博客文章留下很多有用的评论,同时他的评论都填写了留言者的网站URL,但是有一天他的博客域名换了,并请求你更新他留言中的网站URL,那你怎么办?手动一个一个帮他改,这不太现实。你可以使用以下SQL语句: 以上语句,将留言者所有旧的网站链接oldurl.com,更改为新的网址newurl.com 5、禁用所有文章的pingback功能: 开启pingback功能,可以在别人引用你的文章链接的情况下,给你发送通知,但是该功能似乎对我们的文章没多大帮助,那为何不把pingback给禁止了呢?在WordPress后台 - 设置 - 讨论,取消勾选"接收来自外部博客的引用通告(pingbacks 和 trackbacks)",这样以后的文章都不开启pingback,但是该选项不会对之前的已发布的文章起作用,还是要用到SQL: 6、删除所有文章的修订版: 在通常情况下,文章的修订版对大多数人来说没多大意义,而且修订版的数量会随着你修改文章的次数不断增长,这会增加数据库的查询速度,这并不是什么好事。互联网上有很多教你如何禁止修订版的文章,还有很多插件可以删除文章修订版,你可以自己搜索看看。这里教你如何使用SQL语句,删除所有已产生的文章修订版数据: 7、删除某个评论者的所有评论: 如果你的博客想要封杀某人,并删除其在你博客的所有留言,可以使用以下SQL语句。(1)根据留言者的博客URL进行删除,以下SQL语句将删除所有URL为 www.example.com 的评论 (2)根据留言者的昵称进行删除,以下语句将删除所有昵称为 example 的评论 (3)根据留言者的Email进行删除,以下语句将删除所有Email为 example@example.com 的评论 8、替换所有评论中的敏感词汇: 国内的互联网监控力度表现出了不断加强的趋势,如果你的博客评论中出现了大量的敏感词汇,很可能离被墙也不远了。最好的做法是,替换相关的敏感词汇,以保证你的博客安全,以下SQL语句将所有评论中的 fuck,替换成 **,替换内容根据你的需要来。 9、关闭文章评论功能 有时候你的博客可能会因为某种原因,需要关闭文章的评论。在WordPress后台 - 设置 - 讨论,那里取消勾选"允许人们发表新文章的评论",以后发表的文章默认是关闭评论的。但是之前已经发表的文章,若想关闭评论需要你一篇一篇地去修改评论设置,这是一件比较痛苦的事情。以下SQL语句可以帮助你轻松地批量关闭文章评论:(1) 关闭所有旧文章的评论:通常情况下,一篇旧文章就很少会有人发表评论了,一般访问旧文章的访客大都来自搜索引擎,这是好事,但是这部分访客还会提出一些新问题,尤其是技术问题,但是可能文章中提到的技术细节你已经淡忘,这时候会让你很难办。最好的做法还是还是禁用旧文章的评论,以下SQL将禁止2009-01-01之前发表的所有文章的评论,你可以根据需要修改日期: (2) 关闭所有文章的评论:有时候很不幸,在不可抗力的威胁下,你不得不关闭所有文章的评论,可以使用以下SQL语句: 参考文章: WordPress : 10+ life saving SQL queries 13 Useful WordPress SQL Queries You Wish You Knew Earlier
WordPress登录自动勾选记住我的登录信息 博客建设

WordPress登录自动勾选记住我的登录信息

WordPress登录时有个“记住我的登录信息”勾选,默认14天内将自动登录,除非你手动注销。如果你总是忘记勾选这个复选框,这本文的技巧将帮你自动勾选。 记住我的登录信息 将以下代码添加到当前主题 functions.php 文件: 隐藏复选框 如果你想隐藏这个复选框,可以将下面的代码添加到当前主题 functions.php模板文件中: 延长自动登录时间 另外,想延长自动登录时间,可以将下面的代码添加到当前主题 functions.php模板文件中:
使用XENU批量检测被百度收录的死链 博客建设

使用XENU批量检测被百度收录的死链

在网上找了一下,似乎只有检测网址是否被收录的工具,而没有检测收录的是不是死链的工具。自己理清了下思路,找办法找出了所有被收录的死链,并写下这篇文章。不知道有没有更好的方法,大家可以告诉我,先分享给大家,如果有大神请忽视或者告诉我更好的方法,一起学习交流吧。下面教程开始先在百度找到xenu可以模拟爬虫爬取所有连接,我下载了个汉化版。我们先用这个工具查询所有被收录的页面。 打开软件,填入简版百度site网站地址,之所以用简版是可以减少链接查询时间和内容。 (请把www.jangrui.com换成你的网址)http://www.baidu.com/s?ie=utf-8&tn=baidulocal&wd=site%3Awww.jangrui.com 等待检测完成。 点击导出为制表符分隔的文件。 导出的文件,我们可以看到格式是:网址+空格+状态码 那么我们写一个正则,把需要的网址提取出来就行,比如www.baidu.com下的404页面就是 /http:\/\/www.baidu.com(.*?)\s404/i (以http://www.baidu.com开头,\s代表空格,404,/i代表匹配大小写) 不会正则怎么办? 为了方便大家,我把文件作了修改,大家只要把head改成标致性开头,state改成状态码就行,file改成导出的文件路径就行。 head怎么改,举个例子,你的网站是http://www.baidu.com/abc.html,那么你就写http://www.baidu.com/你的网站是http://abc.baidu.com/abc.html,那么你就写http://abc.baidu.com/把正则写入404.php,在php环境下运行404.php。那么结果就出来了。 这时你只需要全选,复制到一个txt文件,上传到网站空间,再到百度站长平台死链提交填入文件路径就行就可以。 我们知道,思路是通过爬取找出所有被收录的链接,然后按条件列出来而已。这样的话,只要把开头输入的site网址改一下,也可以查询其他搜索引擎的收录。把正则改一下,可以获得如标题等其他内容。在此就不一一叙述。
如何用css让一个容器水平垂直居中? 博客建设

如何用css让一个容器水平垂直居中?

问题:如何让class为div2的内部容器上下左右居中? 前来面试的朋友大多数回答都不那么正确,笔者在这里给大家做一个详细的介绍1. 我们可以使用margin来达到这个效果 --------我们需要将div2的margin-left、margin-top值设置为父容器宽度的二分之一减去自身宽度的二分之一,这里的父容器是div1它的宽度是100px;div2的宽度是40px;由此得出: div2也就居中了; 效果如下图2.利用绝对定位 position:absolute 配合margin的auto属性 来达到居中的效果  我们可以将css修改为 --------将div2设置为相对div1的绝对定位,margin设为四边auto left、top、bottom、right设为0,浏览器会对绝对定位的容器margin:auto自动识别,最后得到类似于margin:0 auto的效果;而我们也可以将left、top、bottom、right设为你想要的值 让div2可以在div1中的任意位置,只是定位的原点被margin:auto移动在div2的左上角;例如: 此时div2的位置在垂直居中的-30px的地方; 3.不用绝对定位,这样也可以实现任意div2高度 总结:在我们的网页中,经常会遇到这样的需求 弹窗的居中,图片的居中,很多童鞋采用js算法动态设置left、top ; 而这一步是没有必要的; 在研究了规范和文档后,我总结出了“完全居中”的工作原理: 1、在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。W3.org:If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0. 2. 设置了position: absolute; 的元素会变成块元素,并脱离普通文档流。而文档的其余部分照常渲染,元素像是不在原来的位置一样。Developer.mozilla.org:…an element that is positioned absolutely is taken out of the flow and thus takes up no space 3.、设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子,因此这个元素会填满它相对父元素的内部空间,这个相对父元素可以是是body标签,或者是一个设置了 position: relative; 样式的容器。Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to). 4.、给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算,并包裹一层新的盒子。Developer.mozilla.org:The margin of the [absolutely positioned] element is then positioned inside these offsets. 5、 既然块元素是绝对定位的,又脱离了普通文档流,因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。W3.org:If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically使用“完全居中”,有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。
前端不为人知的一面 博客建设

前端不为人知的一面

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如: 将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码,sigh~这一技术在《让Chrome 接管邮件连接,收发邮件更方便了》中有使用到,利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。 浏览器地址栏运行HTML代码 如果说上面那条小秘密知道的人还算多的话,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。 你造么,可以把浏览器当编辑器 还是浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样,吼吼。 归根结底多亏了HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。推而广之,将以下代码放到console执行后,整个页面将变得可编辑,随意践踏吧~ 利用a标签自动解析URL 很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。 利用这一原理,稍微扩展一下,就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客。 页面拥有ID的元素会创建全局变量 在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。 加载CDN文件时,可以省掉HTTP标识 现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全考虑有的CDN服务器使用HTTPS方式连接,而有的是传统的HTTP,其实我们在使用时可以忽略掉这个,将它从URL中省去。 这一点在《jQuery编程最佳实践》中也有提到。 利用script标签保存任意信息 将script标签设置为type='text'然后可以在里面保存任意信息,之后可以在JavaScript代码中很方便地获取。 CSS篇 关于CSS的恶作剧 相信你看完以下代码后能够预料到会出现什么效果。 简单的文字模糊效果 以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool! 垂直居中 有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。 相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。 多重边框 利用重复指定box-shadow来达到多个边框的效果在线演示 实时编辑CSS 通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也! 创建长宽比固定的元素 通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。 CSS中也可以做简单运算 通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。 JavaScript篇 生成随机字符串 利用Math.random和toString生成随机字符串,来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理,这个基数从2到36封顶。如果不指定,默认基数是10进制。略屌! 整数的操作 JavaScript中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。 顺便说句,!!将一个值方便快速转化为布尔值 !!window===true 。 重写原生浏览器方法以实现新功能 下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。 关于console的恶作剧 关于重写原生方法,这里有个恶作剧大家可以拿去寻开心。Chrome的console.log是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。好冷,我表示没有笑。是从这篇G+帖子的评论里看到的。使用之后的效果是再次调用log会输出字迹模糊不清的文字。 不声明第三个变量的值交换 我们都知道交换两个变量值的常规做法,那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况,下面的代码给出了这种实现。蛮有创意 的。 万物皆对象 在JavaScript的世界,万物皆对象。除了null和undefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型,当试图在其身上调用toString方法会失败,但用括号括起来后再调用就不会失败了,内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此,你的确可以把基本类型数字,字符串,布尔等当对象使用的,只是注意语法要得体。同时我们注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点省略了而以,比如你看到的1可以写成1.,这也就是为什么当你试图1.toString()时会报错,所以正确的写法应该是这样:1..toString(),或者如上面所述加上括号,这里括号的作用是纠正JS解析器,不要把1后面的点当成小数点。内部实现如上面所述,是将1.用包装对象转成对象再调用方法。 If语句的变形 当你需要写一个if语句的时候,不妨尝试另一种更简便的方法,用JavaScript中的逻辑操作符来代替。 比如上面的代码,首先得到今天的日期,如果是星期天,则弹窗,否则什么也不做。我们知道逻辑操作存在短路的情况,对于逻辑与表达式,只有两者都真才结果才为真,如果前面的day变量被判断为假了,那么对于整个与表达式来说结果就是假,所以就不会继续去执行后面的alert了,如果前面day为真,则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。对于传统的if语句,如果执行体代码超过了1 条语句,则需要加花括号,而利用逗号表达式,可以执行任意条代码而不用加花括号。 上面if语句中,如果条件成立则执行三个操作,但我们不需要用花括号将这三句代码括起来。当然,这是不推荐的,这里是冷知识课堂:) 禁止别人以iframe加载你的页面 下面的代码已经不言自明了,没什么好多说的。 console.table Chrome专属,IE绕道的console方法。可以将JavaScript关联数组以表格形式输出到浏览器console,效果很惊赞,界面很美观。 REFERENCE What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about? 45 Useful JavaScript Tips, Tricks and Best Practices 10 Small Things You May Not Know About Javascript
为你的Web程序加个启动画面 博客建设

为你的Web程序加个启动画面

.Net开发者一定熟悉下面这个画面: 这就是宇宙第一IDE Visual Studio的启动画面,学名叫Splash Screen(或者Splash Window)。同样,Javar们一定对Eclipse的启动画面不会陌生。不只是IDE,很多桌面程序都会有这个Splash 窗口,在程序进行初始化时显示。这方面做得最赞的非Adobe旗下的设计类软件莫数了,毕竟是搞艺术出身的啊。博主从PS 8.0用起,每次升级新版本激动的不是新功能,首先是激动新的启动画面。下图是最新CC版PS的Splash Screen。视觉效果震撼的一逼。。张牙舞爪的,无出其右。 启动画面也不是桌面程序所独有,完全可以在我们的网页中实现。并且随着时间的推移,现在Web应用越来纷繁复杂,加载也是很费时的,一个Splash Screen就显得很有必要了不是么。比如谷哥的Gmail,要是全屏运行,就一个原生App的感觉。 下面我们就来为我们的Web应用加上Gmail一样的Splash Screen。程序可以很渣,若表面功夫到位了同样可以显得高端大气上档次。效果预览请点我 && 浏览代码请点我 进度的获取 展示静态图片还好,如果你的启动界面要显示程序进行的进度的话,一个很棘手的问题来了,如何获取进度。经过大量的调研(写过论文的同学都知道,类似'经过大量实验表明…'的表述其实很有可能是只做了一次实验就开始写结论了)我发现,没有办法获取一个页面的实际下载进度!当然,不排除我孤陋寡闻,如果你知道这样的方法请告诉我。 对于页面中的异步操作,倒是可以监听到进度的。但也得分情况。HTML5规范中,Ajax多了个progress事件,通过它可以获取异步操作的完成情况,但前提是event.lengthComputable属性为真是才管用。也就是说有些请求的结果我们是可以知道大小的,但更多时候服务器返回的内容的大小是不确定的,这种情况下即使你监听了progress事件也无法获取真实的操作进度。 既然如此,那我们就不要那么死磕,具体进行到百分之几意义不大,我们的目的是提高用户体验,在用户等待的这个过程中有东西可看,或者有一个活着的会动的东西表明程序还在跑而不是出错了卡死了。所以给用户展示一个会动的进度条即可(我相信大多数带进度条的程序也是这么干的),直到页面全部加载完成时把进度条托到100%。 插曲:在我探索如何获取页面真实下载进度的过程中,研究了pace.js的代码,一个做得非常棒的页面加载进度插件,发现他内部也是这么干的,页面上显示的进度并不真实返回页面加载的实现进度,只是不断的增加而以,等页面加载完了再拖到100%。当然该库写得比较完善,处理了各种情况比如ajax,web socket等。另外就是Gmail,经过大量(也有可能只有两三次,请不必太认真)的刷新页面尝试之后,我发现个规律,它的进度条会一路跑到一个点然后停下来,然后再一路跑到终点!之前的结论。(不过谷歌拥有牛逼烘烘的工程师,不排除他用了啥高科技算法在里面能够精确地返回页面加载的进度。Anyway, 如果我这里的结论错,请别太认真找我麻烦) Nprogress 方便起见,这里使用nprogress这个JS库来显示动画。它提供了很方便的几个API可供我们使用。 NProgress.start() — 启动进度条 NProgress.set(0.4) — 将进度设置到具体的百分比位置 NProgress.inc() — 少量增加进度 NProgress.done() — 将进度条标为完成状态 定义我们的Splash Screen 好的,思路出来了下面我们就开始毫无技术含量的施工。具体来说,首先页面只显示我们预先定义好的Splash Screen,它要占满整个屏幕且z-index设为页面中最高。这里直接借用Juri 发表在他博客中的代码,不过我们使用我《前端冷知识集锦》可提到的技巧,将HTML代码存放在一个script标签中。 这个splash screen会在HTML加载好之后第一时间显示。接下来就可以这样做了,在页面最开始调用 Nprogress.start()启动进度条,而在这个splash screen下方遮住的页面中,继续我们程序的初始化,做其他一些非常耗时的操作等。比如你想象一下Gmail,最开始可能页面只有显示进度条那些基本的HTML和JS代码,然后需要向服务器请求大量的邮件信息,数据接收完后,再组织成HTML生成邮件列表append到页面,但这个过程因为被进度条挡住了,所以我们看不见。等一切就绪,再调用Nprogress.done()将进度条隐藏。这时你看到的就是一个完整的页面了。 事件的顺序 window.onload事件是在整个页面加载完成,包括其中所有图片,iframe等。所以,可以确定在这个事件里面把进度搞到100%是没有问题且逻辑正确的。确定了何时结束再来看何时开始。既然我们一开始就要显示Splash Window且操作之前定义好的splash screen模板,意思就是说再怎么早开始也得等我们splash screen部分的HTML加载完成之后再进行吧。所以,得到的结论就是把进度条开始的代码放在这部分HTML代码之后,但这种HTML中插JS的做法很不好,所以最后决定还是放在$(document).ready()里面,因为这个事件是在页面HTML加载完后触发的,但只是DOM,不包括其他比如上面提到的图片,iframe等,所以它是比window.onload先触发的。所以在页面的head标签里面加入以下代码: 实际应用中更科学的做法其实应该是这样的,页面只有关于进度条的代码,程序的内容全部通过Ajax填充到页面,然后在页面中监视所有Ajax的返回情况。 模拟耗时的操作 一切就绪了,但需要解决一个事情就是如何模拟耗时的操作。我们现在弄的这个例子它不费时,无法看到缓慢的加载效果,并且本地测试,放上几十张图片都会很快就完事。当然可以用setTimeout来达到目的,但不太科学吧,还是要弄得真实点。于是我们在页面放一个iframe,从其他网站引用页面,这样多少会有些加载的时间。所以这个例子最后的代码差不多是这样的了:HTML: 加入些美化的样式:CSS: 现在可以运行页面查看效果了。好了,就这么多。效果预览请点我 Intercept Page Load: https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Intercepting_Page_Loads Gmail-style progress bar when page is loading http://stackoverflow.com/questions/8020929/gmail-style-progress-bar-when-page-is-loading http://www.gayadesign.com/scripts/queryLoader/ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress http://api.jquery.com/jQuery.ajax/ http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ http://github.hubspot.com/pace/ http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/
修复七牛CDN导致AJAX评论错误问题 博客建设

修复七牛CDN导致AJAX评论错误问题

AJAX评论提交错误问题 在安装了水煮鱼(鱼叔)的七牛CDN插件后,一切看起来很完美,静态文件全部通过CDN加速,减轻服务器负担,偶然发现评论无法AJAX提交了,总是提示“{"error":"get from image source failed: E405"}”,网上搜索了一下,发现不少人也有此类问题,主要原因是CDN缓存了commonts-ajax.js文件,而ajax评论默认只加载主题根目录的那个js文件,路径错了,当然提交不了。 网上流传的解决方案 总结一下网上流传的解决方案的几个版本,发现并非所有人都适用,现在先说明一下。第一种方法:修改commonts-ajax.js使之支持CDN路径,具体方案如下:找到如下代码: 添加以下代码: 或着添加: 最后别忘记刷新缓存,更新下cdn的comments-ajax.js文件。问题又来了,因为小编用的是知言的Tinection主题,comments-ajax.js文件是压缩过了,也无法找到明显的此类标识符,而且新版本的comments-ajax.js也集成在function.js文件里了,修改太困难了,所以PASS。第二种方法:使用WP-Super-Cache插件的CDN功能添加例外选项,这只对选择使用了该插件的用户有效;做法如下图: 在“如果是之前有则排除”选项中添加comments-ajax记录以排除对该js的CDN加速。第三种方法:七牛CDN插件修改解决方案wpjam-qiniu这个CDN同步插件,非常不错,目前发现的缺陷就是ajax评论错误和图片暗箱失效,现在好了,你只需要稍微修改插件代码即可解决ajax评论错误。打开插件目录,找到wpjam-qiniutek.php文件打开,定位至100行 前,插入以下代码: 其原理是插件已经修改静态文件原目录至CDN目录,我只需要再把comments-ajax.js这一个文件的目录改回来即可,其中第一个路径是CDN服务器上comment-ajax.js的路径,需要把它替换为第二个路径,即网站原文件路径,具体路径请根据你自己的网站作修改,这样既体验了七牛CDN,又不用愁AJAX评论错误的问题了。最后放出自己对张戈大神的七牛cdn代码版的修改版: