» 延时加载

评论者头像一般都不在网页的首屏显示,但是通常都是自动加载的,这样就会拖慢网页打开的速度.解决办法就是在还没没有显示前先不加载.就跟微博那样的.微博是用的Ajax实现的,但是Ajax对搜索引擎不好,我们这里还想让搜索引擎搜到我们的评论内容呢.嘿嘿,所以我们需要一个折中的办法:评论内容正常加载,只将评论者头像先用另一个图像占位,等滚屏到该头像时再用真实的头像替换. 其实直接设置img的src属性为空也是可以的,但是在加载的时候就会看到一个叉,那样很不友好.如果使用一个loading的gif图片,那么当刚看到图片的时候,显示的是loading图片(占位图像),也就是说正在加载中.这样就会友好很多了. 这里只讲iNove主题的修改方式,其他主题可以依照这个修改. 上传占位图像 找一个占位图像,并上传到空间,例如{wordpress目录}/wp-content/themes/inove/img/loading-m.gif 当然也可以将我用的占位图像上传到你的空间.不要使用我的,我有防盗链的. 修改head.php 找到head.php并修改,路径为{wordpress目录}/wp-content/themes/inove/head.php 在标签前添加以下代码: /* lazy load */ jQuery(function (){ var elements jQuery('#comments').find('img'); var checkShowfunction(event) { var fold jQuery(window).height() + jQuery(window).scrollTop(); elements.each(function(){ if(fold>jQuery(this).offset().top){ jQuery(this).trigger("appear"); elements elements.not(this); } }); if(0elements.length){jQuery(window).unbind("scroll",checkShow);} }; elements.each(function(){ jQuery(this).one("appear",function(){jQuery(this).attr("src",jQuery(this).attr("longdesc"));}); }); jQuery(window).bind("scroll", checkShow); checkShow(); }); 请自行替换上面的yourdomain.com为你的域名.如果本身已经添加了jquery.js,请去掉以上代码的第一行. 修改function.php 找到function.php并修改,路径为{wordpress目录}/wp-content/themes/inove/function.php 搜索function custom_comments($comment, $args, $depth)函数,并在其上面添加以下代码: /* lazy load comments avatar */ function get_avatar_lazyload($avatar) { $avatar str_replace(' src', ' longdesc', $avatar); $avatar str_replace(' 替换为: 到此,大功告成,function.php和head.php,查看效果吧. 非iNove主题 其实非iNove主题要修改也是很方便的,如果没有使用WP-RecentComments插件,对于function.php的修改反而更简单呢.只要将以下代码添加到主题目录下的function.php内就行了. /* lazy load comments avatar */ add_filter('get_avatar', get_avatar_lazyload, 10, 1); function get_avatar_lazyload($avatar) { $avatar str_replace(' src', ' longdesc', $avatar); $avatar str_replace('<img', '<img src\'http://yourdomain.com/wp-content/themes/inove/img/loading-m.gif\'', $avatar); return $avatar; } 请自行替换上面的yourdomain.com为你的域名. 结后语 本来想把这个东西做成插件方便大家使用的,但是由于使用add_filter后,WP-RecentComments插件获取到的图片为展位图像,不知道怎么过滤掉,就没做成插件了,嘿嘿,谁知道的也可以帮忙告诉我下,我好将这个东东做成插件,方便大家使用. 现在已经做成插件了,并且解决了以上的问题和任意主题.

LiteFeel

延时加载iNove主题的评论者头像