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