WordPress图片真正实现延迟加载

WordPress教程

WordPress程序很吃内存,优化得当才能让主机把性能发挥到极致,512M内存最低端的阿里云主机,只运行了一个外汇站,不释放内存的话,每天占用的内存在220M左右。

因为每天访问网站的人越来越多,一些教程图片很多,打开一个页面有时好几十张图片一起加载,这样太吃带宽和CPU了,打开网页会慢、卡顿。

很多博主希望为图片加速,把wordpress提速至飞的阶段,这有两种方法解决,一种是用外链图片,另一种就是图片延迟加载。

WordPress延迟加载的插件,印象中似乎没有好用的,有的插件假延迟、伪延迟,只是让图片渐隐。有些图片延迟插件非但不能让网站提速,还拖累网站的速度。

很多博主的优化能力比我强,外汇站除了js、css、jquery没有整合过之外,别的能优化的都优化了。今天进行了最后一次优化,实现了WordPress图片真正延迟加载。

一、下载jquery.lazyload.js

下载地址:http://pan.baidu.com/s/1i3wyHAd

解压缩出两个文件,一个js文件,和一个1x1像素的gif白色图片,图片可以根据自己的想法去替换,比如用一个转圈加载提示的图片替换掉它,效果也是不错的。

二、修改header.php

上传jquery.lazyload.js到网站根目录,在模板header.php的</head>上方添加如下代码,记得把域名修改成自己的。

<script src="http://www.waihuizhan.com/jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(function() {
jQuery("img").lazyload({
effect : "fadeIn",
failure_limit : 10 });
});
</script>

三、修改functions.php

上传image-pending.gif至主题根目录,然后在模板函数functions.php中,<?php这行的下一行添加如下代码,之后网站的所有图片就实现延迟加载了。

function add_image_placeholders( $content ) {
// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
return $content;
// Don't lazy-load if the content has already been run through previously
if ( false !== strpos( $content, 'data-original' ) )
return $content;
// In case you want to change the placeholder image
$placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/image-pending.gif' );
// This is a pretty simple regex, but it works
$content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-original="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );
return $content;
}
add_filter( 'the_content', 'add_image_placeholders', 99 );
add_filter( 'get_avatar', 'add_image_placeholders', 11 );
add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );

再进行访问网站的图片时,浏览器滚动到的图片才会加载显示,未浏览的图片不会再进行加载显示。如果你的主机已经很快,资源也充足,可以等待日后再进行设置。

PS:

如果感觉文件路径太赤裸裸了,可以把js和图片都传到主题相应的文件夹。拿外汇站主题busybee来说,修改如下,可以仿照修改。

1、jquery.lazyload.js

http://www.waihuizhan.com/wp-content/themes/busybee/includes/js/jquery.lazyload.js

2、/image-pending.gif

图片的路径不用添加域名,这个/指向本身就是主题文件夹,大多数主题(busybee)里都有个名为image的图片文件夹,把图片放到image文件夹,代码修改直接添加文件夹的名字就行了。

/image/image-pending.gif

PS:

图片延迟加载可能会与安装的缓存插件发生冲突,致使所有的图片失效,在带宽充足的情况下,没有必要使用图片延迟加载。

如果网站流量不大的话,可以使用七牛云存储,10G容量、10G流量,静态文件缓存到七牛之后,网站上的图片都是瞬开的,提速效果很明显。

相关内容推荐

详解如何优化压缩WordPress博客图片

详解如何优化压缩WordPress博客图片

相信我们,独立站尤其是新建的站点,应该知道如何去讨好搜索引擎,也只有这样才可以获得更好的展现位置。 而,如何让搜索引擎觉得你的站点更友好,其中一个办法就是让你的网站

12款最佳WordPress联系表单插件

12款最佳WordPress联系表单插件

联系表单似乎是每个网站应该具有的一个常见的功能,但WordPress本身并不提供该功能。 任何类型的联系表单功能都只能通过第三方WordPress插件实现。 当我们开始开发WordPress主题时,是

阻止WordPress垃圾评论方法

WordPress是全世界最流行的免费开源博客程序,可以根据自己的需求安装主题和插件,很多博客站长都选择它来搭建自己的独立博客,但是博客在使用过程中,经常会收到大量的垃圾评论

WordPress插件Widget Logic使用教程

WordPress插件Widget Logic使用教程

Widget Logic可以实现自由展示wordpress不同的侧边栏还是底部栏,下载安装启用插件Widget Logic,wordpress后台→外观→小工具。 拖拽任意显示的小工具,展开小工具连接栏,在每个小工具栏底

如何提升WordPress博客网站回访率?

如何提升WordPress博客网站回访率?

当网站开始收获大量流量时,站长必然是异常兴奋的。 这些流量或许是你通过网站搜索引擎优化、社交推广等方式带来的,但如果你发现这些流量都是一次性流量,那还值得兴奋吗?

返回
顶部