189 8069 5689

html中如何实现懒加载-创新互联

小编给大家分享一下html中如何实现懒加载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销推广、网站程序开发、HTML5响应式网站建设公司手机网站制作设计、微商城、网站托管及网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为三轮搅拌车行业客户提供了网站改版服务。

优势

  1. 性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。

  2. 节约带宽:这个不需要解释。

通常,我们在html中展示图片,会有两种方式:

  1. img 标签

  2. css background-image

img的懒加载实现

img有两种方式实现懒加载:

  1. 事件监听(scroll、resize、orientationChange)




    
    
    
    event
    


    
    
    
    
     -->
    
    
    
    
    
    
    
    

  1. Intersection Observer(兼容性问题)




    
    
    
    observer
    


    
     -->
    
    
    
    
    
    
    
    
    
    
    

background-image的实现

background-image的实现跟img的原理基本是一样的,区别是在对class的处理上:




    
    
    
    background
    


    

渐进式懒加载

渐进式懒加载,指的是存在降级处理,通常html形式如下:


  image

这样的代码会有2个好处:

  1. 如果js执行失败,可以点击预览

  2. 大小与实际图一致的占位data URI,避免reflow

最终的代码如下:




    
    
    
    progressive
    


    
        palm trees
    
    
        sunset
    
    
        tide
    
    
        palm trees
    
    
        sunset
    
    
        tide
    
    

以上是html中如何实现懒加载的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前标题:html中如何实现懒加载-创新互联
网页链接:http://cdxtjz.cn/article/egsjg.html

其他资讯