为WordPress浏览到的时候加载图片|基于jQuery.Lazyload
2010.05.05
这个效果老早就用了，上次博客大改的时候忘了加上 jQuery(document).ready(function($) 这句话导致代码失效，
囧了~~今天从新启用了，强烈推荐给大家。
特效优点：
1、加速wordpress站点的页面载入速度；
2、不唐突的图片渐显方式；
3、代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js
原理：
这个特效是少有的 即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，
若非 则加载 预留的填充图片 fill.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才回加载。
也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何乐而不为呢？
不用用担心对访客的有好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。
特效缺点：有 一个，是关于img，height限定的问题，但是对于wordpress用户，不深究。嘎嘎
实现方法：
1、下载 jquery.lazyload.js 1.6K
下载 预填充图片 fill.gif 43字节
2、将上面2文件，放到wordpress的某个目录，最好主题目录，好调用。
3、在当前主题的 header.php 中适当位置添加下面 JS调用代码：
【绿色部 分请自定义】
【红色部分可以限定只对 文章中的img生效】比如修改成 $(".content img")
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lazyload.js"></script><script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder : "<?php bloginfo('template_url'); ?>/fill.gif",
effect : "fadeIn"
});
});
</script>
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder : "<?php bloginfo('template_url'); ?>/fill.gif",
effect : "fadeIn"
});
});
</script>
与他有一腿的文章：
TAG标签：WordPress, wordpress 优化, wordpress 加速, 加载图片
．
暂无留言我要留言 »