给我的美图网添加图片延迟加载

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

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

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

步骤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