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="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个版本，版本一为最上面介绍的，版本二是我自己使用的，至于文件地址，和图片地址，你说了算，但是别不做修改，我的是不支持外链的.
转载本站原创文章请注明：文章转自 挨踢路，链接: https://986554.ykncch.asia/articles/1504.html
WP怎么异步显示
其实 是一样的
这个倒是很实用，主要是用户体验好！
是啊 用户体验很不错
异步加载已经成了趋势
是的，web2.0追求的就是用户体验
用了你的合并代码……可惜我的mediawiki还是没法异步加载图片，真是郁闷啊
对我来说这是一篇很好的文章，菜鸟受教了。【文章写得”老“了点，不过我是新人，经典永不褪色】
那是图片还没加载完的吧
【这个真不是。】不过仍旧感谢。
感谢感谢，我一般都是把图片传到一些微博上，然后外链过来的
写得简洁易懂，xiexie !
不客气~
你的下载链接已经失效了，但是我还是看得不太懂，请问这些代码是插入到哪个模版里面？希望你联系我，谢谢！
你连个网站地址都不留，囧。看我的HTML代码就可以了，你用什么模板就放什么模板。这些只是jquery代码，HTML看到的是一样的
其实我对代码什么的一窍不通，我的意思是插入到page.php还是header.php style.cc 还是其他什么的。
其实我建议你搞一个评论邮件恢复，这样提高粘性。
谢谢你的建议。你没收到邮件，要么你填写的邮箱有误，要么就是进入了垃圾邮件。我查过是发送成功的~~
快点叫我呀~~~~
快点教我~~~
模板的头部文件
放到pge.oho？
page.php？