接触过SEO的朋友们都知道,网站的打开速度也是在搜索引擎上获得更好排名的重要因素之一,无奈自己的网站图片太多,即使我们将图片压缩,但网站打开速度还是过慢,这样即影响搜索引擎的收录排名,同时也影响网站的客户体验度!试想下谁会等待一个需要1分钟才能打开的网站?那么遇到这种因图片而导致网站打开速度过慢的情况该怎么办呢?你可以尝试下载网站js图片延迟加载插件,加快网站的打开速度

首先介绍下这款网站JS图片延迟加载插件,这款插件名字叫做Lazy Load,它是一个通过JavaScript而编写的Jquery程序,这款网站JS图片延迟加载插件主要作用是在打开一个网站时,使这个网站上的图片延迟加载,从而加快网站的打开速度。网站JS图片延迟加载插件的运行原理是再打开一个网站时先通过这款插件检测浏览器的可视区域并且加载可是区域内的图片,而可视区域外的图片则不加载,直到浏览者将页面滚动到没有加载的图片时在加载这个图片,这样可以大大加快网站的打开速度。

网站JS图片延迟加载插件的使用方法:

Step1.首先下载 jquery.min.js 和 jquery.lazyload.js两个JS文件。

Step2.将刚刚上传的两个JS文件上传到服务器,记住这两个文件的所在位置。

Step3. 打开需要将图片延迟加载的页面,在页面代码中的前添加以下代码。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.js?v=1.9.0"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
     $("img.lazy").lazyload();
  });
</script>

Step4.修改页面源代码中的img标签如以下样式。

<img class="lazy" src="img/grey.gif" data-original="img/1.jpg" width="765" height="574" alt="网站js图片延迟加载插件">

*代码说明:

1.class="lazy" 为图片添加js 中相对应的类 class="lazy".

2.src="img/grey.gif"为图片添加一个超小的图片作为预加载图片.

3.data-original="img/1.jpg" 真实的图片地址.

4.alt="网站js图片延迟加载插件"网站图片描述这个随意.

好了以上就是网站js图片延迟加载插件“Lazy Load”的使用方法和介绍,梓岳曾经亲身试过确实网站打开速度快了不少。如果你的网站图片较多,并且打开速度较慢,那么就下载网站js图片延迟加载插件,彻底加快你的网站打开速度吧!安阳博客www.zyblog.cc

本文来源于 梓岳 转载请注明出处,谢谢!