wordpress/zblog网站图片延迟加载提高网站打开速度
通俗地说网页图片延迟加载即是加载网页的时候，把本该一同加载的图片用体积很小的图片暂时替换加载，达到减少加载体积的目的，当用户浏览到图片的区域时再把原图片加载回来（大致是这个意思）！图片延迟加载对网页的加载速度的提高很有帮助，同时实现网站图片延迟加载也不繁琐，因此前人已为我们准备好了所有工作。
通用网页：
下载所需的jquery.lazyload.js文件（文章末有下载地址），然后在网页的前添加以下代码：
1 2 3 4 5 6 7 8 9 10 11 |
script type="text/javascript">
jQuery(document).ready(
function($){
$(".thumbnail img").lazyload({
placeholder : "http://xx/xx/grey.gif", //加载图片前的占位图片,你的存放路径
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
script>
|
把.thumbnail改为自己网页包围img图片的样式；用PS制作一张宽高分别为1px的图片，命名为grey.gif，放在对应的文件目录，然后修改上面的http://xx/xx/grey.gif为图片的url地址。
zblog博客实现：（zblog 2.0+版本）
把js文件保存在zb_user/theme/主题名称/script/目录
在zb_user/theme/主题名称/template/header.html的前面添加代码；
1 2 3 4 5 6 7 8 9 10 11 |
script type="text/javascript">
jQuery(document).ready(
function($){
$(".thumbnail img").lazyload({
placeholder : "http://xx/xx/grey.gif", //加载图片前的占位图片,你的存放路径
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
script>
|
wordpress博客实现；
把js文件保存在wp-content/themes/主题名称/下面
在wp-content/themes/主题名称/header.php文件的前面添加上面的代码；
1 2 3 4 5 6 7 8 9 10 11 |
script type="text/javascript">
jQuery(document).ready(
function($){
$(".thumbnail img").lazyload({
placeholder : "http://xx/xx/grey.gif", //加载图片前的占位图片,你的存放路径
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
script>
|
文件下载：DownLoad（包括jquery.lazyload.js和grey.gif文件）
© 版权声明
转载请注明来自白芸资源网以及原文地址。
本站不敢保证内容的可靠性，内容仅供小范围学习与参考，禁止用于商业、盈利或其它非法用途以及大范围传播，您需在学习与参考完毕后从您的个人存储空间彻底删除，因您滥用而造成的损失本站不承担法律责任。
本站部分内容可能源于互联网，版权争议与本站无关，如有侵权可联系站长处理，敬请谅解！
请您合法使用本站资源。
THE END
