懒加载和预加载

懒加载就是在资源进入可视区域之后再加载

  1. 页面可视区高度: clientHeight = window.innerHeight
  2. 元素在页面中的位置: rect = el.getBoundingClientRect()
  3. 如果页面在可视区域: rect.top < clientHeight && rect.bottom

预加载,就是在资源进入可视区域之前完成加载

  1. 用css隐藏此标签,做提前加载: display: none;
  2. 使用js的方式,优先使用这种方式
    const img = new Image()
    console.log('run')
    // onload  script  页面结束加载之后触发。
    img.onload = function(e) {
      alert('image loaded')
    }
    img.src = 'https://www.baidu.com/img/bd_logo1.png?where=super'
    
  3. 使用XMLHttpRequest,
    1. 可以更好的控制整个加载的过程
    2. 存在跨域问题
  4. PreloadJS 库, 已经帮助实现了懒加载和预加载。 原理就是上述三种方式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。 当访问一个页面的时候,先把img元素或是其他元素的背景图片...
    却忘不掉你心言阅读 3,398评论 0 4
  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,531评论 18 160
  • 懒加载和预加载 1. 懒加载 1. 什么是懒加载? 懒加载也就是延迟加载 当访问一个页面的时候,先把img元素或是...
    琦琦出去玩了阅读 4,059评论 0 8
  • 图片懒加载 在图片未到达可视区域时,先不请求图片,到达可视区域后再去请求图片,防止页面在初始化时加载大量的图片,影...
    放风筝的小小马阅读 2,682评论 0 0
  • 一、懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户...
    浪里行舟阅读 4,328评论 0 8