Typecho用lazyload.js实现图片异步载入

Typecho已经有几个月的时间了,一直没怎么去折腾,就是修改了主题,加了点自己喜欢的东西。看起来顺眼了些,但是今天发布了一个多图的日志,就觉得,一下子要加载那么多的图片,很是浪费时间,就想到了,我在逛别人的博客时,就遇到了异步加载的情况,节省了时间,看起来也很酷,用户体验也很好。

OK,放狗搜,谷歌真是给力,一下子就找到相关文章,用于WP的,我看得明白大概意思,搬过来很快的就可以用了,嘿嘿。

所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行。

看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我想找这样一种插件,让网页只加载浏览器视野范围内的图片,没出现在范围内的图片就暂不加载,等用户滑动滚动条时再逐步加载。lazyload就是用来实现这种效果。

lazyload.js其实是jQuery的一个插件,全称是jquery.lazyload.js,看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的,所以适用于所有网页,包括Typecho,Wordpress。

想要使用lazyload,得先载入jQuery,它是依靠jQuery来实现效果的。至于jQuery,大家不用去下载了,可以直接连接存放在Google服务器上的jQuery文件,永远不用担心丢失(当然,如果有天朝完全屏蔽Google的那一天的话……)

<scripttype="text/javascript" src='/index/thumb.png' data-original="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<scripttype="text/javascript" src='/index/thumb.png' data-original="https://itlu.net/index/jquery.lazyload.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : "https://itlu.net/index/grey.gif", //加载图片前的占位图片
     effect      : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>

至于效果,可以看这个文章:南海神庙半天游(有图版)

以上资料来自:http://www.jo2.org/106.html

但是我比较无聊,看到既然记载了3个JS,为什么不合并为一个呢?那么浪费表情干嘛呢?OK,下载谷歌的js文件,打开我的jquery.lazyload.js 将其合并在一起,第三个也丢进去了,省事。3个文件,总的有83KB,有点浪费资源的说。没办法,为了这个效果。

文件打包下载【我要下载

说明:压缩包有2个版本,版本一为最上面介绍的,版本二是我自己使用的,至于文件地址,和图片地址,你说了算,但是别不做修改,我的是不支持外链的.

查看 js Typecho lazyload的相关文章

转载本站原创文章请注明:文章转自 挨踢路,链接: https://itlu.net./articles/1504.html

评论列表(24条)

  1. WP怎么异步显示

    1. 其实 是一样的

  2. 这个倒是很实用,主要是用户体验好!

    1. 是啊 用户体验很不错

  3. 异步加载已经成了趋势

    1. 是的,web2.0追求的就是用户体验

  4. 用了你的合并代码……可惜我的mediawiki还是没法异步加载图片,真是郁闷啊

  5. 对我来说这是一篇很好的文章,菜鸟受教了。【文章写得”老“了点,不过我是新人,经典永不褪色】

    1. 补充一下,有些图片成了gray.gif???

      1. 那是图片还没加载完的吧

        1. 【这个真不是。】不过仍旧感谢。

  6. 感谢感谢,我一般都是把图片传到一些微博上,然后外链过来的

  7. 回复scarangel93scarangel93

    写得简洁易懂,xiexie !

  8. 回复RazerWangRazerWang

    你的下载链接已经失效了,但是我还是看得不太懂,请问这些代码是插入到哪个模版里面?希望你联系我,谢谢!

    1. 你连个网站地址都不留,囧。看我的HTML代码就可以了,你用什么模板就放什么模板。这些只是jquery代码,HTML看到的是一样的

      1. 回复RazerWangRazerWang

        其实我对代码什么的一窍不通,我的意思是插入到page.php还是header.php style.cc 还是其他什么的。

  9. 回复RazerWangRazerWang

    其实我建议你搞一个评论邮件恢复,这样提高粘性。

    1. 谢谢你的建议。你没收到邮件,要么你填写的邮箱有误,要么就是进入了垃圾邮件。我查过是发送成功的~~

      1. 回复RazerWangRazerWang

        快点叫我呀~~~~

  10. 回复RazerWangRazerWang

    快点教我~~~

    1. 模板的头部文件

      1. 回复RazerWangRazerWang

        放到pge.oho?

  11. 回复RazerWangRazerWang

    page.php?

添加评论

您好,#请填信息# 确定

打赏请博主喝水
LOADING