一、为什么使用这个东东
1.第一次上小舟的博客看到这个效果,感觉到很酷
2.图片多的话,听说可以加速站点的页面载入速度
二、准备工作
1.先决条件
(1)加载query.js
可以到用这个链接: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js
或者到这个链接:http://ajax.proxy.ustclug.org/ajax/libs/jquery/1/jquery.min.js
或者下载下来传到自己的博客
(2)下载lazyload,百度一下,你就知道
(3)上传文件
模板目录下新建一个”js”的目录,把jquery.lazyload.js,jquery.js(我是下载下来的)传入
gray.jpg传入模板下的“image”目录
三、怎么修改
1.找到博客模板下面的header.php
2.打开后,可以看到一般的模板都会在开始的时候执行一个script,肯定在自己的目录里有,要么是main.js要么是xxx.js
3.如果模板没有加载jquery,就手动写进去吧
4.找到刚模板作者执行脚本的地方
在作者执行脚本的地方继续加入:
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ placeholder : "<?php bloginfo('template_url'); ?>/images/grey.gif", effect : "fadeIn" }); }); </script> |
保存上传,打开页面看看就知道了
四、效果
没看到吗?就是这个效果。
http://cppkey.com