懒加载

最新推荐文章于 2024-04-23 18:09:29 发布

九州清宴

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量67

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/chenxiaodage/article/details/108850229

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

vue的路由封装与路由懒加载：

**
在pages里面封装一个路由配置文件router/index.js
下载vue-router：npm/cnpm i vue-router --save
router/index.js中引入：import VueRouter from ‘vue-router’
main.js中引入：import router from ‘./router’

配置路由信息：
path：路由路径
redirect：路由重定向
import：路由的访问地址

import Vue from 'vue'
// 1.引入vue-router
import VueRouter from 'vue-router'
import { Store } from 'vuex';
import store from '../store'
// 2.给vue安装路由插件，让每一个组件中都可以使用router-link和router-view组件

Vue.use(VueRouter);

// 引入组件

// 3.路由配置--路由映射
var routes = [
    {
        path: '/',
        //懒加载
        
        component: () => import('../components/Index'),
        redirect: "/home",
        children: [
            {//管理员管理
                path: '/user',
                component: () => import('../components/user/AdminList'),//路由懒加载，当路由被访问的时候才加载对应的组件
 //使用动态的import把不同路由对应的组件分割成不同的代码块
                meta:{select:'/user'}
            },
            {
                path: '/user/add',
                component: () => import('../components/user/AdminAdd'),
                meta:{select:'/user/add'}
            },
            {
                path: '/user/:id',
                component: () => import('../components/user/AdminAdd'),
                meta:{select:'/user'}
            },
            {//轮播图
                path: '/banner',
                component: () => import('../components/banner/BannerList'),
                meta:{select:'/banner'}
            },
            {
                path: '/banner/add',
                component: () => import('../components/banner/BannerAdd'),
                meta:{select:'/banner'}
            },
            {
                path: '/banner/:id',
                component: () => import('../components/banner/BannerAdd'),
                meta:{select:'/banner'}
            }
        ]
    },
    {
        path: '/login',
        component: () => import('../components/Login')
    },
    {
        path: '/test',
        component: () => import('../components/Test')
    },
    {
        path: '*',
        component: () => import('../components/Notfound')
    }
]

// 4.实例化路由对象

var router = new VueRouter({ routes: routes, mode: 'history' })

router.beforeEach((to, from, next) => {
   if(to.path == '/login'){
       next()
       return
   }
   if(!store.getters.userinfo){
next('/login')
   }
    next()

})

//导出router，vuerouter实例

export default router;

图片懒加载

**
懒加载也就是延迟加载，当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
减少页面请求消耗
原理：
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”属性里，要用的时候就取出来，再设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.con {
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            display: inline-block;
            margin-bottom: 5px;
        }

        div.con img {
            width: 200px;
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- 懒加载: 滑动到那里, 当前页面中的内容就加载出来, 加载之前, 页面结构已经排版好 -->
    <div id="wrap">

    </div>

    <script>     
    
    
        // 滚动到那里，就把哪里的图片显示出来
        // 让每一张img的src等于img的imgsrc
        // 屏幕的高度宽度 
        var wrap = document.getElementById("wrap");
        var img = document.getElementsByTagName('img');
        var wh = document.documentElement.clientHeight;

       
        for(i=0;i<100;i++){

                wrap.innerHTML += `<div class="con"><img src=""
            imgsrc="https://pics7.baidu.com/feed/eac4b74543a9822617f9bc2a24d66e074a90eb5b.jpeg?token=0541625202ef98d5b174b5aa751bb666"
            alt=""></div>`
        }
        loay()
        window.onscroll = function () {
            loay()
            window.onresize = function () {
                loay()

            }

        }
        function loay(){
                  // 检测滚动的高度
            // 当图片进入页面的时候开始显示
            // 当页面的滚动的高度 + 当前屏幕的高度 >= 元素.offsetTop
            // 滚动的高度
                var scTop = document.documentElement.scrollTop;
                for (var i = 0; i < img.length; i++) {
                if (wh + scTop >= img[i].offsetTop) {
                    img[i].src = img[i].getAttribute('imgsrc');
                }
            }
        }
    </script>
</body>

</html>

九州清宴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
懒加载

**vue的路由封装与路由懒加载：**在pages里面封装一个路由配置文件router/index.js下载vue-router：npm/cnpm i vue-router --saverouter/index.js中引入：import VueRouter from ‘vue-router’main.js中引入：import router from ‘./router’配置路由信息：path：路由路径redirect：路由重定向import：路由的访问地址import Vue from
复制链接

扫一扫

专栏目录