关于图片延迟加载的JQ插件

2010.05.18 14 Comments 5167 Views

这破玩意让我纠结了不少时间。

感谢党,感谢国家,另外还感谢 @wange1228  的临门一脚让我豁然开朗大彻大悟立地成佛。再另外这个貌似和父母没啥关系,我就不感谢父母了。

这个东西的功能就不多介绍了,搜进来看的都了解,不了解的一小撮自己Google去。

OK,准备好下面两个JS和一个图片,放在自己知道的地方

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

http://iamwd.com/wp-content/themes/elegant-box/images/grey.gif

新建一个js文件,随便取名

填充内容

$(function() {

$(“img”).lazyload({

placeholder : “grey.gif文件路径”,

effect : “fadeIn”

});

});

在模板header.php或者footer.php里面猥琐的插入

<script type=”text/javascript” src=”文件所在目录/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” src=”文件所在目录/jquery.lazyload.js”></script>

<script type=”text/javascript” src=”文件所在目录/刚才创建的js文件”></script>

唔,优化控自行合并js。

貌似这样就搞定了?嗯,貌似是的……

BTW:貌似形如

<script type=”text/javascript”>

$(function() {
$(“img”).lazyload({
placeholder : “grey.gif文件路径”,
effect : “fadeIn”
});
});

</script>

是没法调用成功的,这是为虾米呢?反正我这没成功过。

接着纠结一下虚拟主机DA面板和cPanel面板的cron job功能,昨天在DA面板上试着定时优化数据库,失败了……不知道问题出在哪里,回头继续尝试。

WooDragon's Blog内容均为原创,转载请注明出处

14 Responses
Comment (14)
Trackback (0)
  • #1
    胡一刀 :

    这个高级了,图片延迟加载有什么用呢?

    2010.05.18 08:50 Reply
    • WooDragon :

      @胡一刀 这个嘛,你点开我那篇富阳游记,应该是第三篇吧,因为有一大堆图,一般情况下要载入NNNN久,不过这玩意弄上去之后,很快就显示完成了。虽然事实上还没有好。
      它的作用就是让还没显示到的图片不载入,等需要它显示的时候再载入。
      再通俗点讲,就是你拖到哪载到哪~

      2010.05.18 09:06 Reply
      • 胡一刀 :

        去看了下,真爽,好东西啊!

        2010.05.18 11:12 Reply
  • #2
    万戈 :

    看到效果了,不错不错

    2010.05.18 12:29 Reply
    • WooDragon :

      @万戈 感谢万戈大侠指点,感激不尽ing,下回来杭州请你吃鸡蛋饼,嘿嘿

      2010.05.18 12:39 Reply
  • #3
    Showfom :

    要jq 哥就不用了

    2010.05.21 11:54 Reply
    • WooDragon :

      @Showfom 你的博客图片也不多哇,的确没必要用~

      2010.05.21 12:04 Reply
      • Showfom :

        貌似我发现 这个说是延迟加载图片 但是图片实际上已经下载的 还是要占用带宽嘛

        2010.05.21 12:07 Reply
        • WooDragon :

          不是啊,我在Firefox和IE上测试了,都是提前完成加载的,没有把下面的下载下来。据说在Chrome和Safari上面好像会有问题,这个我就不太清楚了。

          2010.05.21 12:13 Reply
  • #4
    Epile :

    木龙就喜欢折腾……

    2010.05.22 09:16 Reply
    • WooDragon :

      @Epile 俗话说得好,生命在于折腾~~

      2010.05.22 09:25 Reply
  • #5
    Skyoy :

    这个效果我是需要的,博客里太多图片了,记录下去折腾去。

    2010.05.24 23:50 Reply
  • #6
    hzs :

    收藏转载

    2010.08.15 15:45 Reply
  • 还没有Trackback
Leave a Reply
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif