记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > jQuery特效 > 图片适当载入渐显特效,基于jQuery.Lazyload

图片适当载入渐显特效,基于jQuery.Lazyload

Tags: | | 作者:海天无影

先来说明一下“图片适当载入渐显特效”,就是当即将浏览到有图片的地方,那张图片才开始自动加载,当然不是突然加载上去,而是渐显效果的加载起来,让浏览者感觉不是那么生硬。这样的好处就是可以加快访问速度和节省流量,因为很多浏览者说不定只是想看一下内容,或者根本看不完内容,这样他没看到的图片就不会显示。而且这样也不用担心浏览者会看不到图片,因为在即将浏览到图片的时候,图片会自动渐显的加载。

呵呵很帅吧,来看看怎么实现的吧,加速度和省流量,何乐而不为呢。

这个图片适当载入渐显特效是海天在HZLZH博友那看到的,海天感觉很不错,就载了过来,可以让更多朋友看到,顺便备份下,呵呵。

特效优点:
1、不会全部加载页面所有图片,加快页面载入速度;
2、图片加载渐显效果,图片显示方式不生硬;
3、代码精简,便于操作维护,JS代码仅仅 1.6KB ,当然前提是你的先加载jQuery库。注意:这里不能用GOOGLE的mini 1.3.2版的jQ库;

原理嘛,上面海天已经简单说过了,特效是判断了是否浏览到图片,如果没有则加载fill.gif(43字节),当浏览者鼠标滚动快要到图片地方,则自动加载图片,并以渐显效果显示,这样的显示效果对用户体验也有一定的提高。也就是说如果浏览者打开后瞬间关闭,屏幕上没有显示的图片是不会加载的,这样速度和流量肯定是节省不少的了,特别是那些图片博客。海天已经测试过,在浏览到图片之前,图片是不会被加载的。

方法:
1、下载jquery.lazyload.js (1.6K)和 预填充图片 fill.gif( 43字节) download-下载,图片适当载入渐显特效相关文件
2、当然是上传到网站目录,例如http://blog.haitianhome.com/up/
3、在header.php顶部适当位置添加以下代码:

<script type="text/javascript" src="http://blog.haitianhome.com/up/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : "http://blog.haitianhome.com/up/fill.gif",
     effect      : "fadeIn"
});
});
</script>

代码中,红色部分可以换成你想要使用特效的图片,默认是全站图片使用。
绿色的<script>中的jQ可以加载到你网站中原有jQ特效js文件。

注意!!本文中使用的jQ库不能使用google的1.3.2版的mini的jQ库,1.4.2到是可以使用,不过太新太大,海天不推荐使用。海天推荐使用WordPress自带的jQ库,文件位于:/wp-includes/js/jquery/jquery.js。
调用方法:

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

到底显示的效果是什么样子的,大家可以用鼠标向下滚动,接着向下,到评论位置,那评论者的头像显示效果就是啦,效果不错吧。再给大家多图的文章,让大家慢慢观赏。
GOOGLE在香港的新家,程序员梦想的工作环境

日志信息 »

该日志于2010-04-22 09:51由 海天无影 发表在jQuery特效分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

21条评论▼点击进行评论

  1. 技术贴.坐沙发

  2. 不错。。。

  3. 又多了个js负担,太多了也就不好了,我先观察观察你博客的效果再说,哈哈。

    • 呵呵 好的
      观察后觉得怎么样啊
      现在我博客速度慢吗?卡吗?
      给点意见哈

  4. 看完了,还是觉得没怎么怎么懂

    • 额 哪里没看懂呢?
      是不知道效果什么样子吗?
      我感觉上面讲的蛮详细的啊 呵呵

      • 最后那行代码插哪?

        • 哦 最后那个啊,那个是调用jQ库,也是加在header文件里的,你可以加在步骤3中的代码上面一行哦。

  5. 奇怪,我的博客在IE6下不能正常显示,而你的却可以,咱们用的都是同一主题啊

    • 额 是哪里不能正常显示呢?

    • 我也问下,哪里不能显示啊

  6. :razz: 以前也从来没这样想过,发现原来也可以这样。喜欢技术文章。

    • 呵呵,我以后会经常发我看到的好的代码的
      欢迎经常光临哦~

  7. 技术贴 哈 需要的时候翻出来学习

    • 呵呵 我也是做备份之用
      需要时方便查找~

  8. 代码高手。

    • 额 我才不是高手
      呵呵 代码是网上找的,转载别的高手的。

  9. 喜欢技术的文章,呵呵

  10. 不错,过来学习了。

    • 呵呵 大牛你谦虚了
      我还要向你学习了
      准备转载你一篇图片投影样式的代码 哈哈~ ;-)

  11. 你强悍,呵呵,看你的博客看的是效果,厉害

    • 额 我是把别人的代码 拿过来 加上去
      呵呵 变形金刚,变形……

  12. 弄的那个效果不好,速度会变慢,现在快也因为你的数据小

    • 效果怎么不好了啊?速度慢是加载图片的时候会顿一下
      这个和数据大小没关系,这个只是图片相关的,和数据库不相干的哦。

      • 网站不错,收了。你也喜欢PROWER的主题哦,评论模板是不是自己改过啊。很喜欢,能不能发份给我,谢谢。

        • 我是用wp_list_comments的回调函数mytheme_comment来重新生成评论的
          应该不算模板吧
          你还要啊~

  13. 这个暂时收藏,以后用

  14. 把 $(“img”) 改成 $(“.content img”) 以后,渐显就失效了,整个效果都停止工作了,什么原因….?

    • 不好意思 前几天不能上网
      你的文章的div 的 class是content吗?

      • 我咋就没想到呢,太笨了~呵呵。解决啦,我的模板文章的 div 居然是用的 id=content,改成 #content img 就可以了~ 非常感谢呀 ;-)

        • 呵呵 客气了 解决了就好
          我现在也是就文章的图片加载这个特效
          要不然图像也加载 感觉滑动时会卡
          其实还可以增加一个有图片才调用的

  15. 嘿嘿,这个效果主题也自动集成了,不然还真的需要这个JS呢。

  16. 这个应该怎么调用,放在那个文件里面?

  17. 不错不错,看看

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 

« 生者奋发,逝者安息 新版Google Maps增加中文语音识别搜索 »