给自己博客进行优化时,曾在一些较好的博客里见到过一些非常不错的用户体验设计,因此很想给自己博客也添加上类似的设计,前段时间花点时间把图片延迟加载(lazyload)效果给用上了,感觉不错,在时下流行的浏览器下测试都表现很完美,但是昨天自己在用手机浏览网站体验时发现延迟加载的图片在手机下面全部无法显示,整篇文章的浏览体验糟糕到极致,所以今天立即取消此特效。
特此注明也算分享给其他玩wordpress博客的童鞋,如果追求单方面电脑体验不在意手机浏览体验方面的话可以+上图片延迟加载(lazyload)特效,能给网站的用户体验加分,但是如果刚好和小波一样有那么点极致追求全方面的话那就取消此特效吧。
说说自己关于图片延迟加载测试整个环境:
电脑系统:XP SP3
博客版本:WP3.14中文版
电脑上的浏览器:时下所有流行浏览器
手机:E63
手机系统:塞班 v5
手机浏览器:OPERA
测试中由于暂时手中没有安卓(android)系统的手机,我不能确定此系统下是否能完美浏览,虽然安卓系统未来可能会代替塞班系统,但至少现在的手机使用情况下绝大部分童鞋还是以诺基亚等手机为主,兼顾考虑,还是取消是为上策。
随便提及下wordpress非插件使用jquery图片延迟加载(lazyload)的方法:
1.首先找到主题文件夹下的header.php页面
2.打开然后在头部标签</head>前添加如下代码:
<script type=”text/javascript” src=”http://www.ganxb2.com/js/jquery-1.6.1.min.js”></script>
<script type=”text/javascript” src=”http://www.ganxb2.com/js/jquery.lazyload.js”></script>
<script type=”text/javascript” src=”http://www.ganxb2.com/js/ganxb2.js”></script>
关于调用链接说明:
http://www.ganxb2.com/js/jquery-1.6.1.min.js
这是你放置下载的js文件路径,根据您自己博客的情况而修改
$(function() {
$(“.child-post img”).lazyload({
effect : “fadeIn”
});
});
上面代码语意:指只有在文章内页的图片才会使用图片延迟加载效果,可以根据自己的情况而改变修改 “.child-post img”
图片延迟加载(lazyoad)所需要的文件完整打包下载地址:
更多详细jquery图片延迟加载(lazyload)的使用方法请参看鸟哥这篇文章:
http://zmingcx.com/jquery-lazy-to-achieve-picture.html
常年活动于网络,与网络打交道,有点小梦想的幻想主义web页面仔,喜欢摄影,重构,前端,设计,seo
Stay Hungry, Stay Foolish — Steven Paul Jobs
求知若饥,虚心若愚 — 史蒂夫 乔布斯
同盟源 http://tmy123.com/
07/23/2015 于 00:20
然而现在..哎,时光匆匆啊
前列腺炎怎么样
02/24/2012 于 17:29
嗯,对我很有帮助呢.有空别忘了回访哦:
秘书派
10/19/2011 于 21:35
好东西,要试一试
小波
10/19/2011 于 23:47
手机上可是看不到图片噢