首页 > Other > WordPress 使用 lazyload 加快网页访问速度,实现图片渐显动态效果

WordPress 使用 lazyload 加快网页访问速度,实现图片渐显动态效果

特效优点:

1、加速wordpress站点的页面载入速度;

2、不唐突的图片渐显方式;

3、代码精简,便于操作维护,JS代码仅仅 1.6KB 先决条件是:你的站加载了 Jquery.js。(注意:这里不能用GOOGLE的mini 1.3.2版的 jQ 库)

原理:

这个特效是少有的既华丽又加速的效果,因为它能判断访客是不是在查看当前图片,若非,则加载预留的填充图片 fill.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载。也就是说,如果访客瞬间打开你的页面,然后瞬间关闭,处于页脚的图片是不被加载的,何乐而不为呢?

不用用担心对访客的友好程度,这个效果会在图片即将被浏览到的时候就开始加载图片。

实现方法:

1、下载 jquery.lazyload.zip (包含 jquery.lazyload.js 和 fill.gif )

2、将上面2文件,放到 wordpress 的某个目录.

3、在当前主题的 header.php 中适当位置添加下面 JS调用代码:

<script type="text/javascript" src="http://littledoras.tk/wp-content/themes/W1s/img/imgmovement/jquery.lazyload.js"> </script> <script type="text/javascript"> jQuery(document).ready( function($){ $("img").lazyload({ placeholder : "http://littledoras.tk/wp-content/themes/W1s/img/imgmovement/fill.gif", effect : "fadeIn" }); }); </script>

其中“http://littledoras.tk/wp-content/themes/W1s/img/imgmovement”部分需替换为你自己的路径,ready( function($){ $(“img”) 若是修改成 $(“.content img”) 可以限定只对文章中的 img 生效(前提是文章的 div 的 class 是 content ,若是文章 id 是 content,则可以改为$(“#content img”)。

调用方法(可将此段代码加到上面第3步代码之前):

<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'> </script>

这样就OK了,打开我的blog,用滑轮滑动浏览,便可以看到图片加载的整个动态效果了,相当的华丽啊!!!

分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: