我的图片站下载流量一直很紧,随时欠下七牛一笔钱跑路的节奏。尤其是我不喜欢给网站图片添加太多分页,点一下看一张那种实在是憋屈。

套图分类是重灾区,因为每篇文章都有几十张图片,一个IP就带走我不少流量了。必须给它加延迟加载,拉下时再加载图片节省流量。

原谅我现在还没搞好代码高亮,凑合看看先。

先上Demo:美女纹身艺术照 @全过程

步骤1、引用jQuery.js,一般主题都有。如果没有,直接用度娘CDN的好了,要加在后面那些JS之前

步骤2、下载jquery.lazyload.min,如果下载后文件名有变,请重命名回jquery.lazyload.min.js,放置到主题的js文件夹里

步骤3、在页脚加入以下代码:

$(function() { jQuery("img").lazyload({ effect : "fadeIn", failure_limit : 10 }); }); $(function() { $("img:below-the-fold").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},2000); });

步骤4、修改主题的function.php,在底部的 ?> 之前添加以下代码,并找一个好看的加载gif,命名为loading.gif,丢进主题的images’文件夹里

`//图片懒加载 function add_image_placeholders( $content ) { if( is_feed() || is_preview() || ( function_exists( ‘is_mobile’ ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, ‘data-original’ ) ) return $content; $placeholder_image = apply_filters( ‘lazyload_images_placeholder_image’, get_template_directory_uri() . ‘/images/loading.gif’ ); $content = preg_replace( ‘#]+?)src=['“]?([^'“\s>]+)['“]?([^>]*)>#’, sprintf( ‘

<img${1}src=””${3}>

‘, $placeholder_image ), $content ); return $content; } add_filter( ‘the_content’, ‘add_image_placeholders’, 99 );`

观察下源代码,图片不再是src直接输出了,而是放置在data-original里了。

QQ截图20150914233910

补充说明:

effect : “fadeIn”, 加一个淡入的特效

failure_limit : 10 }); 查找到第10个未显示的标签处

event : “sporty” 通过点击或者鼠标移动到图片上才触发Lazyload

$(“img.lazy”).trigger(“sporty”)},2000); 定义延迟时间过后再加载

看到这些无限旋转的小菊花,表示已经成功了。

QQ截图20150914233724
QQ截图20150914233724

更加详细的请看:http://www.jb51.net/article/31594.htm