wordpress/zblog网站图片延迟加载提高网站打开速度

通俗地说网页图片延迟加载即是加载网页的时候,把本该一同加载的图片用体积很小的图片暂时替换加载,达到减少加载体积的目的,当用户浏览到图片的区域时再把原图片加载回来(大致是这个意思)!图片延迟加载对网页的加载速度的提高很有帮助,同时实现网站图片延迟加载也不繁琐,因此前人已为我们准备好了所有工作。

通用网页:

下载所需的jquery.lazyload.js文件(文章末有下载地址),然后在网页的</head>前添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
<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博客实现:(zblog 2.0+版本)

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

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

1
2
3
4
5
6
7
8
9
10
11
<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>

wordpress博客实现;

把js文件保存在wp-content/themes/主题名称/下面

在wp-content/themes/主题名称/header.php文件的</head>前面添加上面的代码;

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.lazyload.js"/></script>
<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文件)

网友留言:

  1. 2016-04-19回复

    亲爱的站长,下载资源无效了呀

  2. 2014-02-03回复

    请问下“把.thumbnail改为自己网页包围img图片的样式”这个是什么意思,这一段代码需要修改吗?还是可以直接用的?

    • 博主板凳
      2014-02-04回复

      就是img的父层样式名称或ID名称

  3. 2013-07-22回复

    这个有用!可以减轻空间的负荷!

发表留言