• 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特效,希望今年能发布吧。
  • 相关阅读:
    程序是怎样跑起来的 第三章
    C#4.5-4.7学习总结
    第二周学习总结
    程序是如何跑起来的 第二章
    第一章读后感
    师生关系读后感
    C#学习总结
    我与计算机
    读《程序怎样跑起来》第一章有感
    读师生关系有感
  • 原文地址:https://www.cnblogs.com/zzq-include/p/4573749.html
Copyright © 2020-2023  润新知