JS懒加载

4.如何使用js懒加载图片

 

    a.懒加载图片是基于jquery.js的，所以：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

 

 

    b. 需要懒加载的图片，①.增加 data-original="图片真实地址"

                                       ②.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)

                                       ③.图片一定要设置 width 与 height     //为什么？请阅读网页优化相关文章…无语...

                                       注意：这点你可能没办法接受，因为需要改变你的html

src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

 

  c.把需要懒加载的图片，选中，然后调用插件函数就ok了！

 

$("img.lazy").lazyload();

 

 

5.使用优点分析

   a. 提高网页加载速度，直接影响收录与排名。

       --在蜘蛛抓去的时候，爬行你的网页会非常快速，以至于页面优化值得到最大提升。

   b. 减少请求，降低服务器压力。

       --只有当用户滚动到可视范围内才加载图片，你说是不是下载次数减少了？

 

 

 

 

6.使用缺点分析

   a. 图片不会被收录

       --蜘蛛会收录图片到，自己服务器的图片库中。但因为我们的静态页面的图片都指向一张，所以图片不会被蜘蛛收录。

   b. 页面又要引入一个 js

       --我们开发者更希望简单，而不是引入一堆东西，因为很少人去关注源码，很怕会出问题。

 

 

作者也在尽力开发一个综合的js特效，希望今年能发布吧。