如何用js实现路由懒加载

最新推荐文章于 2024-08-22 09:15:00 发布

勤奋的七仔

最新推荐文章于 2024-08-22 09:15:00 发布

阅读量620

点赞数

文章标签： js

本文链接：https://blog.csdn.net/XiehaiyanLI/article/details/108655863

版权

本文介绍了JavaScript中的懒加载概念，强调其优化网页性能和提升用户体验的作用。主要探讨了图片懒加载的实现原理，通过控制img标签的src属性来控制请求。同时，简述了路由懒加载在单页面应用中的重要性，以减少首屏加载时间，提高加载速度。

摘要由CSDN通过智能技术生成

概念

什么是懒加载？
懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。
为什么要懒加载？
懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现在一张图片的大小超过几兆是一件很正常的事，那么就需要注意到一个问题：当用户在访问一个网页的时候就会请求所有图片资源，如果网速不够快的话，那么用户只能够看到一个空白的网页，或者一个不完整的结构布局，当图片加载完成后，估计用户早就走了。

所以这就是为什么要使用懒加载的原因

总结出来有两个点：

全部加载用户体验差

一次性全部加载浪费用户流量，也许只是访问部分内容，不是全部内容都能够访问完，全部加载的话，就有点浪费流量了。
懒加载实现原理（图片懒加载）
网页占用资源较多的一般都是图片，进行懒加载的情况一般都是针对于图片来进行的图片懒加载，当然还有一种情况是路由懒加载，这里讲的还有实现原理主要是针对图片。

在H5里面，图片的标签就是img，而图片的 src属性就是图片的来源地址。浏览器是否发起请求也是根据是否有img标签内是否有src属性来决定的。

知道了这点我们就可以根据标签的src属性来进行操作了，在没进入可视区域的时候，我们先不给这个标签赋src属性，这样浏览器就不会发送请求了。

实现过程代码实现如下：

HTML部分

<!DOCTYPE html>
<html>

<head>
  <title>Demo-Lazyload</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style>
    img {
   
      height: 500px;
      width: 500px;
      display: block;
      background: url(images/loading.gif) no-repeat center;
      margin: 0 auto
    }

    #lazy {
   
      width: 800px;
      margin: 0 auto
    }
  </style>
</head>

<body>
  <div id="lazy">
    <img data-src="images/1.jpg" src="images/pixel.gif" />
    <img data-src="images/2.jpg" src="images/