福州seo|福建seo >> 福州SEO优化 >> 网站图片优化,图片延迟加载技术提高网页打开速度

网站图片优化,图片延迟加载技术提高网页打开速度

作者:SEO技术 分类: 福州SEO优化 发布于:2015-8-14 23:52 ė618次浏览 60条评论
一个网站是否优秀,可以从他的功能,外观,访问量等等角度去评价,但笔者认为其中最基础,最核心的因素莫过于网站的响应速度。一个网站做的再漂亮,功能再强大,但是速度打开很慢,那也是白搭。只有一个网站在速度为先的基础上才能获得更大的成功。

谈论了这么多关于网站速度的重要新,那么我们在制作网站的时候应该如何提升网站的速度呢,这个方面很多,其中很重要的一点就是网页里含有大量的图片,会导致网页速度加载过慢。这个也是笔者今天要和大家分享的。如果你的网站必须有很多图片,那么我们该如何优化他呢,没错!就是图片延迟加载技术,话不多说,下面就说下该如何实现这个功能。


工具/原料
jQuery
步骤/方法

第一,该功能主要依靠jQuery,所以首先要下载程序包,在百度里搜索“图片延迟加载 下载”会有很多的下载包。

第二,将文件解压,将Js文件夹所有文件上传至网站根目录,目录形式为:
/Js/lazyload/grey.gif
/Js/lazyload/jquery.js
/Js/lazyload/jquery.lazyload.js

第三,调用方法:
在需要用到特效的页面上,加上以下代码
<script type="text/javascript" src="/Js/lazyload/jquery.js"></script>
<script type="text/javascript" src="/Js/lazyload/jquery.lazyload.js"></script>

添加调用代码
<script type="text/javascript">
$("img").lazyload();
</script>

关于图片延迟加载还有很多应用,这里就讲解最基础的,对一般的网站会有很大的帮助

注意事项
其中img是延迟加载所有图片,也可以根据不同模板作相应改动,比如我这个主题,可以改成#post img,这样只延迟加载#post 容器内的图片,否则可能影响到侧边图片的加载;
如果上传路径改变,或者加载时图片打叉,说明图片路径不正确,查找jquery.lazyload.js中的placeholder:,将后面的图片地址换成绝对地址即可!

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部