在超出网站可视范围内,图片先不做加载也就是先不下载,先下载可视范围内的图片与整个网页文件.
等到用户滚动浏览器窗口,图片元素到达可视范围内,开始加载图片.
图片延迟加载可以节省网站的资源和加快WordPress网站访问速度,所以对于图片较多的wordpress网站来说,图片延迟加载功能还是非常的好的。
方法一: 使用WordPress插件jQuery Image Lazy Load
在WordPress插件安装界面搜索 jQuery Image Lazy Load 即可在线安装;
这样我们就能弄懂WordPress如何实现 lazyload 的原理;
1.WordPress的模板的header.php需要加载lazyload必要文件:
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect:"fadeIn" }); }); </script>
注意:上面的fadeIn 是 加载图片使用的效果(淡入)
2.lazyload要求必须给图片地址添加一个data-original属性
那么有占位图的写法为: (占位图是指: 加载图片前的占位图片)
<img class="lazy" src="images/lazy.gif" data-original="images/example.jpg" width="640" height="480">
简单的无占位图也可以使用 (占位图是指: 加载图片前的占位图片)
<img class="lazy" data-original="images/example.jpg" width="640" height="480">
注意: 这些文件要确实存在,文件地址请自行修改.
你需要修改WordPress主题让你的主题自带图片带有上面的data-original属性与占位图
3.给WordPress里文章里插入的图片加data-original属性了,可以将下面的代码添加到当前主题 functions.php 文件中:
//给WordPress里文章里插入的图片加data-original属性 add_filter ('the_content', 'lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif'; if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content); } return $content; }
4.WordPress里gravatar评论头像启用图片延迟加载:
用下面的代码:
<?php echo '<img class="avatar" src="' . get_bloginfo('template_directory') . '/img/loading.gif" alt="avatar" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar( $comment, '64' )) . '" />'; ?>
替换替换WordPress主题里的gravatar头像调用标准函数:
<?php echo get_avatar( $comment, '32' ); ?>
愿意看原版英文教程的请访问 lazyload
1.图片延迟加载的核心文件为 jquery.lazyload.js
2.lazyload 是一个Jquery 插件,所以还得引入jquery.min.js
于是你的网页需要引入这两个文件:
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect:"fadeIn" }); }); </script>
注意:上面的fadeIn 是 加载图片使用的效果(淡入)
2.lazyload要求必须给图片地址添加一个data-original属性
那么有占位图的写法为: (占位图是指: 加载图片前的占位图片)
<img class="lazy" src="images/lazy.gif" data-original="images/example.jpg" width="640" height="480">
简单的无占位图也可以使用 (占位图是指: 加载图片前的占位图片)
<img class="lazy" data-original="images/example.jpg" width="640" height="480">
注意: 这些文件要确实存在,文件地址请自行修改.
你需要修改WordPress主题让你的主题自带图片带有上面的data-original属性与占位图
注意网站图片带data-original属性的才支持图片延迟加载哦.