js如何实现首屏延迟加载

这篇文章主要介绍js如何实现首屏延迟加载,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对水泥搅拌车等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。

js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

具体内容如下

作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了)

原理:

1)、对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置(默认图需要非常的小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我在开始加载真实的图片

2)、对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片

扩展:数据的异步加载,开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到对应区域的时候,在重新请求数据绑定渲染数据

具体可以看一下下图

js如何实现首屏延迟加载

首屏的延迟加载代码如下:




  
  Document
  


  
    
    
  
  

多屏单张图片的延迟加载

js如何实现首屏延迟加载

具体代码如下:




  
  Document
  


  
    
    
  
  

以上是“js如何实现首屏延迟加载”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前标题:js如何实现首屏延迟加载
分享链接:http://cdiso.cn/article/jpeeph.html

其他资讯