提升zblog网站打开速度小技巧之修改加载代码延迟图片加载

由 willer 发布

可以说,网站的打开速度是影响读者对网站感受的一个重要方面。而网站的打开速度与网站服务器,网站的大小,网站的结构等都有密切关系。今天我们就来介绍一个简单的小技巧,能够在不更换服务器,不改变网站主体结构的情况下,有效提升页面的打开速度。

我们的实现思路是,在打开页面时,用较小的缩略图来代替原来网页中的大图,达到减少瞬间加载量,当读者查看到真正的图片区域时再把真正的原大图加载出来。


具体实现逻辑和办法如下:


首先下载所需的jquery.lazyload.js文件,


然后在网页的</head>前添加以下代码:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="http://你的路径/js/jquery.lazyload.js"></script> 

<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 2.0+版本的实现办法


首先把js文件保存在zb_user/theme/主题名称/script/目录


然后在zb_user/theme/主题名称/template/header.html的</head>前面添加代码;


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="<#ZC_BLOG_HOST#>zb_users/theme/<#ZC_BLOG_THEME#>/script/jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(document).ready(

function($){

$(".thumbnail img").lazyload({

     placeholder : "http://xx/xx/grey.gif", //加载图片前的占位图片,你的存放路径

     effect      : "fadeIn" //加载图片使用的效果(淡入)

});

});

</script>

最后保存并运行即可实现图片延缓加载提升网页打开速度的目的。