这个特效是少有的即华丽又加速的效果,个人觉得功能比较实用,因为它能判断访客是不是在查看当前图片,若非则加载预留的填充图片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>
以上js能对无觅相关文章图片进行缓存加载,感觉相当不错,本博客也使用了。