Post

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

我的图片站下载流量一直很紧,随时欠下七牛一笔钱跑路的节奏。尤其是我不喜欢给网站图片添加太多分页,点一下看一张那种实在是憋屈。
套图分类是重灾区,因为每篇文章都有几十张图片,一个IP就带走我不少流量了。必须给它加延迟加载,拉下时再加载图片节省流量。
 原谅我现在还没搞好代码高亮,凑合看看先。
先上Demo:美女纹身艺术照 @全过程
步骤1、引用jQuery.js,一般主题都有。如果没有,直接用度娘CDN的好了,要加在后面那些JS之前

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

步骤2、下载jquery.lazyload.min,如果下载后文件名有变,请重命名回jquery.lazyload.min.js,放置到主题的js文件夹里
步骤3、在页脚加入以下代码:

<!--图片懒加载-->
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(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);
});
</script>
<!--图片懒加载end-->

步骤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( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="" data-original=""${3}><noscript><img${1}src=""${3}></noscript>', $placeholder_image ), $content );
return $content;
}
add_filter( 'the_content', 'add_image_placeholders', 99 );

观察下源代码,图片不再是src直接输出了,而是放置在data-original里了。
 QQ截图20150914233910
补充说明:
effect : "fadeIn", 加一个淡入的特效
failure_limit : 10 });  查找到第10个未显示的<img>标签处
event : "sporty"  通过点击或者鼠标移动到图片上才触发Lazyload
$("img.lazy").trigger("sporty")},2000);  定义延迟时间过后再加载
看到这些无限旋转的小菊花,表示已经成功了。
QQ截图20150914233724
更加详细的请看:http://www.jb51.net/article/31594.htm

Leave a Reply

  • 评论4则,共1页,当前第1
    • gong

      你好,你的图片站的主题能给我一份吗?谢谢

      • 那个主题叫“洛米Loostrive”你找找就有下载的了

    • 哈哈

      楼主研究html代码延迟加载了吗