多图片网站延迟加载加速网站实现方法

近期有一些学做网站论坛学员学习了建站培训课程之后，自己在做图片网站。令人头痛的是图片网站由于图片太多，网站打开速度是个很大的问题，由于同时加载大量图片，导致网站一直在转，加载不完，严重影响网站打开速度。

如果解决拥有大量图片的网站打开速度问题呢？解决方法就是使用图片延迟加载。

图片延迟加载原理

图片延迟加载是通过监测浏览者拖动网页的位置，拖动到网页什么位置就加载这个位置的图片，没有拖动到位置的图片就不加载。这样就避免了同时加载大量图片的问题，大大加快网站打开速度。

网站图片延迟加载方法

1. 首先使用网站图片延迟加载，需要下载jQuery图片延迟加载插件jQuery.lazyload，下载地址：网站图片延迟加载文件jquery.lazyload.js
2. 将下载的jQuery图片延迟加载插件上传到自己网站空间根目录下；并且使用以下的代码引入到自己网站上。

   
   <script src="/jquery-1.11.0.min.js"></script>
   
   <script src="网站域名/jquery.lazyload.js"></script>
   
   

3. 在自己网站底部文件，一般是wordpress底部模板(footer.php)或者是foot.htm代码里粘贴以下的代码：

   
   <script>
   
   $(function() {
   
   $("img.lazy").lazyload({
   
   effect: "fadeIn"
   
   });
   
   });
   
   $("img.lazy").lazyload({
   
   skip_invisible : false
   
   });
   
   </script>
   
   

4. 将网站上的图片代码全部改成以下的格式：

   
   <img class="lazy" data-original="图片地址" alt="">
   
   

5. 这样就可以实现图片延迟加载了，不管多少图片，都可以提升网站速度。