3米免费资源部落

第一次见WordPress图片延迟加载效果还是在WPINK主题中，该WordPress主题默认就可以利用JS(lazyload.js)实现图片随滚动条渐显效果。所以不喜欢自己动手的朋友可以直接下载该主题安装就行了，喜欢自己动手的朋友可以按下面的文章操作。

这个特效是少有的即华丽又加速的效果，个人觉得功能比较实用，因为它能判断访客是不是在查看当前图片，若非则加载预留的填充图片grey.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才会加载。也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何乐而不为呢？ 不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。

图片延迟加载效果实现方法：（先决条件是：你的站加载了Jquery.js）
下载 jquery.lazyload.js
下载 预填充图片 grey.gif
点此打包下载
将上面jquery.lazyload.js 放到你wordpress主题下的js目录（没有该目录就自己新建一个），grey.gif放到你wordpress主题下的images目录，或者你直接在站外调用，只是要记得修改下面的代码路径就行。然后在当前主题的header.php 中适当位置添加下面JS调用代码。
$("img")部分可以限定对页面中的哪些img生效】比如修改成 $(".content img")或者$(".post img")，$(".post img")好像是只有文章正文的图片应用该效果。

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>

<script type="text/javascript">
    // Delay Image
    $(function() {         
        $(".post img").lazyload({
            placeholder : "<?php bloginfo('template_url'); ?>/images/grey.gif",
            effect : "fadeIn"
          });
        });
</script>

注：我是把上面代码放在下面代码之下的。

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.js"></script>

效果见《牛叉的Photoshop特技图赏-你玩的转吗？》不过好像在IE下有点问题，反正我用firefox或者chrome浏览器效果是杠杠的！