现在的位置: 首页WordPress, 美工设计>正文
jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
2010年06月29日 WordPress, 美工设计 评论数 4 ⁄ 被围观 阅读(3,235)+

特效优点:

  1. 加速wordpress站点的页面载入速度;
  2. 不唐突的图片渐显方式;
  3. 代码精简,便于操作维护,JS代码仅仅 1.6KB  先决条件是:你的站加载了 Jquery.js

原理:

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

实现方法:

  1. 下载 jquery.lazyload.js
        下载 预填充图片 grey.gif
        点此打包下载
  2. 将上面2文件,放到wordpress的某个目录,或者你直接在外站调用。
  3. 在当前主题的 header.php 中适当位置添加下面 JS调用代码:【$("img")部分可以限定对页面中的哪些img生效】比如修改成 $(".content img")
    <script type="text/javascript" src="http://haitao.name/wp-content/themes/elegant-box/js/jquery.lazyload.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "http://haitao.name/wp-content/themes/elegant-box/js/grey.gif",
         effect      : "fadeIn"
    });
    });
    </script>

    效果预览:

    见本站任意含多图片页面,随着滚动条滚动即可出效果。

目前有 4 条留言 其中:访客:3 条, 博主:1 条

  1. 匿名 : 2011年11月18日13:05:10  1楼 @回复 回复

    [em=12] 8) [face=25] [face=22] [em=29] [em=27] [face=19] [face=17] [face=15] [em=23] [em=25] [em=2] http://haitao.name/wp-includes/images/smilies/13.gif

  2. 昵称(必须) : 2010年11月26日14:23:33  2楼 @回复 回复

    [em=9]

  3. 开心一百 : 2010年09月06日15:11:19  3楼 @回复 回复

    我的网站图片多,怕流量不够,正好用得到,有空试验下 [face=7]

给我留言

留言无头像?


[face=9] [face=8] [face=7] [face=6] [face=5] [face=4] [face=3] [face=30] [face=2] [face=29] [face=28] [face=27] [face=26] [face=25] [face=24] [face=23] [face=22] [face=21] [face=20] [face=1] [face=19] [face=18] [face=17] [face=16] [face=15] [face=14] [face=13] [face=12] [face=11] [face=10] [em=9] [em=8] [em=7] [em=6] [em=5] [em=4] [em=3] [em=30] [em=2] [em=29] [em=28] [em=27] [em=26] [em=25] [em=24] [em=23] [em=22] [em=21] [em=20] [em=1] [em=19] [em=18] [em=17] [em=16] [em=15] [em=14] [em=13] [em=12] [em=11] [em=10] ;) :| :x :twisted: :roll: :oops: :o :mrgreen: :lol: :idea: :evil: :cry: :arrow: :P :D :?: :? :) :( :!: 8O 8)
×
腾讯微博