图片懒加载处理，了解一下？

原創 会唱歌的前端 2020-05-08 20:27

最近在给公司写微商城，但是写完后单页的商品太多，导致图片加载很慢，而且我发现公司给服务器域名限制了单个IP器访问速度最高只有500K/s，面对这种情况，只好对图片进行懒加载处理了。

接下来要给大家到来的是前端图片懒加载的实现和思路，主要分两种：纵向的和横向的。

  • 不管是纵向的还是横向图片懒加载实现的思路都是一样
  • 首先在第一次渲染列表图片时，不要把图片路径直接赋值给src（不然的话整个页面的图片都会一起加载）
  • 然后在img标签中自定义一个属性值，我这里用src-url表示，然后将图片路径先赋值给src-url（此时页面并不会真正显示图片）
  • 然后监听页面滚动，判断图片外层div或者内层src标签都可以，当其出现在页面时将src-url的图片路径赋值给img标签的src属性（这时图片会加载渲染）
  • 然后把多余的自定义属性值src-url给删掉
  • 这样我们就控制了只有在设备窗口中出现的图片才加载显示的这么一个效果

▼纵向图片懒加载

GIF效果图：
在这里插入图片描述

整个HTML

纵向的还是比较好实现的，直接监听window层的onscroll就好了，获取每一个图片距离窗口顶部的距离也会很容易，也不用考虑多个滚动条的情况。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纵向懒加载图片</title>
</head>

<style>
    body {
        margin: 0;
    }

    .block .item {
        width: 100vw;
        height: 100vw;
    }

    .item img {
        width: 100vw;
        height: 100vw;
    }
</style>

<body>
    <main>
        <div class="block" id="blick-id">
            <!-- <div class="item">
                <img src="" alt="">
            </div> -->
        </div>
    </main>
</body>
<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script>
    var imgArr = ['http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3X8RoF22*mTXfJ3*RNuBlDKADJ1uOLA7MGzFp8BJJXnqeNhEXGt9UcyseKRjTRL3g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAxNbk8AOn2*a26dMBu9JTc5ZMjUoOP8CXSWklFFu3wNX1doPdvuRbT1XP*LngYIcYQ!!/b&bo=qAKoAqgCqAIRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAycZuvsrYM89XrUpvXk.BK7uk48c7uH5PB.O54*yiHLP2DcqIniegFyShf51OvTodw!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA7XyxBYj1ChXgmpm2TPBJ9Qwg7Pg.b85HrbKUQMCkvQPZe8.CKMUzq4gadEk6ZLK7g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2FzxFGTwkwju8grAh*GGjv1BSvZN3Ob9ZKplkXdZtK0dp7dwORVtLeFlZYYpPVWLA!!/b&bo=0ALQAtAC0AIRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3PQtUyBpTU*8PxS83qy6uNvksCAXfA*BjDhPE*k8S48m6I7.tvBznnNyMVpMUe2lA!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA1E320PXRp5qlcLil8TkwsUJIBXnUyjiBKUyIvQnmY87Gx3eBsgtJlhJ5m4P8G12ww!!/b&bo=NgE2ATYBNgERCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2mIh303WaCbhJsTAaw4ebe6WoKyO4SX*lp0lb3pwbXgfdMqCXj5VFP3D.dRrq9UZg!!/b&bo=9AH0AfQB9AERCT4!&rf=viewer_4',
    ]
    //自定义字符串，拼接列表数据
    var itemStr = '';
    //自定义属性值src-url，用于暂存图片路径
    imgArr.forEach((e) => {
        itemStr += `<div class="item">
                        <img src-url="${e}" alt="">
                    </div>`
    })
    //将拼接后的字符串渲染到列表中
    document.getElementById('blick-id').innerHTML = itemStr;

    window.onload = () => {
        // 获取图片列表
        var imgList = document.getElementsByClassName('block')[0].children;
        // console.log(imgList);
        // 初次渲染图片
        lazyLoad(imgList)
        // 二次监听滚动渲染图片
        window.onscroll = function () {
            lazyLoad(imgList);
        };
    }

    //封装懒加载图片方法
    function lazyLoad(imgList) {
        //获取屏幕高度
        var viewHeight = window.innerHeight;
        // console.log(viewHeight)
        //获取纵向滚动的值
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(scrollHeight)
        for (var i = 0; i < imgList.length; i++) {
            // console.log(imgList[i].offsetTop)
            //判断，当图片出现在页面时，
            //imgList[i].offsetTop表示图片外层div距离设备窗口顶部的距离
            if ((viewHeight + scrollHeight) >= imgList[i].offsetTop) {
                //设置立即调用函数
                (function (i) {
                    // 设置延时模拟图片加载缓慢的情况，实际项目中去求就好
                    setTimeout(function () {
                        // console.log(imgList[0].children[0]);
                        // console.log(imgList[i].children[0].getAttribute('src'));
                        //当前图片的节点
                        var imgNode = imgList[i].children[0];
                        //判断，如果图片的路径是空的，就对其进行赋值，且删除多余的自定义属性
                        if (imgNode.getAttribute('src') == null) {
                            imgNode.setAttribute('src', imgNode.getAttribute('src-url'));
                            imgNode.removeAttribute('src-url');
                        }
                    }, 1000)
                })(i)
            }
        }
    }
</script>

</html>

▼横向图片懒加载

GIF效果图：
在这里插入图片描述

整个HTML

横向的考虑因数会比较多，因为一般横向展示物品不单只是一横排的，所以面对多人运动，呸，多排展示时，我们要分别对每一横排的滚动进行处理。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向懒加载图片</title>
</head>

<style>
    body {
        margin: 0;
    }

    .module .title {
        text-align: center;
        background-color: orange;
        color: white;
    }

    .block {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .block .item {
        display: flex;
        width: 50vw;
        height: 50vw;
    }

    .item img {
        width: 50vw;
        height: 50vw;
    }
</style>

<body>
    <main>
        <div class="module" id="module-id">
            <!-- <div class="row">
                <div class="title"></div>
                <div class="block">
                    <div class="item">
                        <img src="" alt="">
                    </div>
                </div>
            </div> -->
        </div>
    </main>
</body>
<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script>
    var imgObj = [
        {
            title: '板块一',
            imgArr: ['http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3X8RoF22*mTXfJ3*RNuBlDKADJ1uOLA7MGzFp8BJJXnqeNhEXGt9UcyseKRjTRL3g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAxNbk8AOn2*a26dMBu9JTc5ZMjUoOP8CXSWklFFu3wNX1doPdvuRbT1XP*LngYIcYQ!!/b&bo=qAKoAqgCqAIRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAycZuvsrYM89XrUpvXk.BK7uk48c7uH5PB.O54*yiHLP2DcqIniegFyShf51OvTodw!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA7XyxBYj1ChXgmpm2TPBJ9Qwg7Pg.b85HrbKUQMCkvQPZe8.CKMUzq4gadEk6ZLK7g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2FzxFGTwkwju8grAh*GGjv1BSvZN3Ob9ZKplkXdZtK0dp7dwORVtLeFlZYYpPVWLA!!/b&bo=0ALQAtAC0AIRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3PQtUyBpTU*8PxS83qy6uNvksCAXfA*BjDhPE*k8S48m6I7.tvBznnNyMVpMUe2lA!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA1E320PXRp5qlcLil8TkwsUJIBXnUyjiBKUyIvQnmY87Gx3eBsgtJlhJ5m4P8G12ww!!/b&bo=NgE2ATYBNgERCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2mIh303WaCbhJsTAaw4ebe6WoKyO4SX*lp0lb3pwbXgfdMqCXj5VFP3D.dRrq9UZg!!/b&bo=9AH0AfQB9AERCT4!&rf=viewer_4',
            ]
        },
        {
            title: '板块二',
            imgArr: ['http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2mIh303WaCbhJsTAaw4ebe6WoKyO4SX*lp0lb3pwbXgfdMqCXj5VFP3D.dRrq9UZg!!/b&bo=9AH0AfQB9AERCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA1E320PXRp5qlcLil8TkwsUJIBXnUyjiBKUyIvQnmY87Gx3eBsgtJlhJ5m4P8G12ww!!/b&bo=NgE2ATYBNgERCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3PQtUyBpTU*8PxS83qy6uNvksCAXfA*BjDhPE*k8S48m6I7.tvBznnNyMVpMUe2lA!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2FzxFGTwkwju8grAh*GGjv1BSvZN3Ob9ZKplkXdZtK0dp7dwORVtLeFlZYYpPVWLA!!/b&bo=0ALQAtAC0AIRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA7XyxBYj1ChXgmpm2TPBJ9Qwg7Pg.b85HrbKUQMCkvQPZe8.CKMUzq4gadEk6ZLK7g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAycZuvsrYM89XrUpvXk.BK7uk48c7uH5PB.O54*yiHLP2DcqIniegFyShf51OvTodw!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAxNbk8AOn2*a26dMBu9JTc5ZMjUoOP8CXSWklFFu3wNX1doPdvuRbT1XP*LngYIcYQ!!/b&bo=qAKoAqgCqAIRCT4!&rf=viewer_4',
                'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3X8RoF22*mTXfJ3*RNuBlDKADJ1uOLA7MGzFp8BJJXnqeNhEXGt9UcyseKRjTRL3g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
            ]
        },
    ]
    //自定义字符串，拼接列表数据
    var moduleStr = '';
    //自定义属性值src-url，用于暂存图片路径
    imgObj.forEach((element, index) => {
        moduleStr +=
            `<div class="row">
                <div class="title">${element.title}</div>
                <div class="block" id="block${index}">
                 ${element.imgArr.map((e) => {
                return `<div class="item">
                            <img src-url="${e}" alt="">
                        </div>`}).join('')}
                </div>
            </div>`
    })
    //将拼接后的字符串渲染到列表中
    document.getElementById('module-id').innerHTML = moduleStr;

    window.onload = () => {
        //全部板块的节点
        var rowLists = document.getElementsByClassName(`module`)[0].children;
        // console.log(rowLists)
        lazyLoad(rowLists);
    }

    //封装懒加载图片方法
    function lazyLoad(rowLists) {
        //获取可视高度(屏幕高度)
        var viewWidth = window.innerWidth;
        /*注意，如果这里用var定义i，需要再包裹一层立即调用函数*/
        for (let i = 0; i < imgObj.length; i++) {
            //设置立即调用函数
            // (function (i) {
            // console.log(imgList)
            //封装加载每一个商品的方法
            function lazyLoadItem(e) {
                //滚动条距离窗口左侧的距离
                var scrollLeft = null;
                //判断，如果e等于空，说明是第一次渲染页面
                if (e == '') {
                    scrollLeft = 0;
                } else {
                    scrollLeft = e.target.scrollLeft;
                }
                for (let n = 0; n < imgObj[i].imgArr.length; n++) {
                    // console.log(viewWidth + scrollLeft)
                    // console.log(viewWidth / 2 * n)
                    //每一个商品图片外层div距离设备窗口左边的距离
                    var offsetLeft = rowLists[i].children[1].children[n].offsetLeft;
                    // console.log(offsetLeft)
                    if (viewWidth + scrollLeft > offsetLeft) {
                        //设置立即调用函数
                        (function (n) {
                            // 设置延时模拟图片加载缓慢的情况，实际项目中去求就好
                            setTimeout(function () {
                                // 当前商品图片的路径
                                var itemImg = rowLists[i].children[1].children[n].children[0];
                                // console.log(itemImg)
                                //判断，如果图片的路径是空的，就对其进行赋值，且删除多余的自定义属性
                                if (itemImg.src == '') {
                                    //获取真的图片路径
                                    var goodsSrc = itemImg.getAttribute('src-url');
                                    // 替换设置图片
                                    itemImg.setAttribute('src', goodsSrc);
                                    //清理掉原来的属性
                                    itemImg.removeAttribute('src-url');
                                }
                            }, 1000)
                        })(n)
                    }
                }
            }
            // 初次渲染图片
            lazyLoadItem('');
            //监听不同滑块的滚动
            document.getElementById(`block${i}`).addEventListener("scroll", function (e) {
                // console.log(e)
                // 二次渲染图片
                lazyLoadItem(e);
            })
            // })(i)
        }
    }

</script>

</html>
关于性能问题

细心的同学应该会发现一个问题，那就是每次监听到滚动变化时都会执行lazyLoad懒加载方法，然而你滑动一次屏幕可能触发了几十次这个方法，所以非常消耗性能，可能会出现滑动时有卡顿的现象。我在网上找了一些滚动停止触发的事例都不怎么理想（貌似都是用setTimeout执行方法，每次监听时都清理clearTimeout计时器，然后用scrollTop来判断执行前后是否相等，相等说明停止了），最后我在菜鸟教程jQuery Mobile 滚屏事件中找到了不错的解决方案，可以参考一下面这个例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery.mobile优化版纵向懒加载图片</title>
    <!-- 引入jquery全家桶 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<style>
    body {
        margin: 0;
    }

    .block .item {
        width: 100vw;
        height: 100vw;
    }

    .item img {
        width: 100vw;
        height: 100vw;
    }
</style>

<body>
    <main>
        <div class="block" id="blick-id"></div>
    </main>
</body>
<script>
    var imgArr = ['http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3X8RoF22*mTXfJ3*RNuBlDKADJ1uOLA7MGzFp8BJJXnqeNhEXGt9UcyseKRjTRL3g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAxNbk8AOn2*a26dMBu9JTc5ZMjUoOP8CXSWklFFu3wNX1doPdvuRbT1XP*LngYIcYQ!!/b&bo=qAKoAqgCqAIRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBAycZuvsrYM89XrUpvXk.BK7uk48c7uH5PB.O54*yiHLP2DcqIniegFyShf51OvTodw!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA7XyxBYj1ChXgmpm2TPBJ9Qwg7Pg.b85HrbKUQMCkvQPZe8.CKMUzq4gadEk6ZLK7g!!/b&bo=LAEsASwBLAEDCSw!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2FzxFGTwkwju8grAh*GGjv1BSvZN3Ob9ZKplkXdZtK0dp7dwORVtLeFlZYYpPVWLA!!/b&bo=0ALQAtAC0AIRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA3PQtUyBpTU*8PxS83qy6uNvksCAXfA*BjDhPE*k8S48m6I7.tvBznnNyMVpMUe2lA!!/b&bo=IAMgAyADIAMRCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA1E320PXRp5qlcLil8TkwsUJIBXnUyjiBKUyIvQnmY87Gx3eBsgtJlhJ5m4P8G12ww!!/b&bo=NgE2ATYBNgERCT4!&rf=viewer_4',
        'http://photogz.photo.store.qq.com/psc?/V14ZaBeY27gVgy/BbSbWrmEw8nJ9LYcvxlBA2mIh303WaCbhJsTAaw4ebe6WoKyO4SX*lp0lb3pwbXgfdMqCXj5VFP3D.dRrq9UZg!!/b&bo=9AH0AfQB9AERCT4!&rf=viewer_4',
    ]
    var itemStr = '';
    imgArr.forEach((e) => {
        itemStr += `<div class="item">
                        <img src-url="${e}" alt="">
                    </div>`
    })
    document.getElementById('blick-id').innerHTML = itemStr;
    window.onload = () => {
        var imgList = document.getElementsByClassName('block')[0].children;
        lazyLoad(imgList)
        //在这里用jquery.mobile的scrollstop处理监听结束
        $(document).on("scrollstop", function () {
            // alert("停止滚动!");
            console.log("停止滚动!")
            lazyLoad(imgList);
        });
    }
    function lazyLoad(imgList) {
        var viewHeight = window.innerHeight;
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgList.length; i++) {
            if ((viewHeight + scrollHeight) >= imgList[i].offsetTop) {
                (function (i) {
                    setTimeout(function () {
                        var imgNode = imgList[i].children[0];
                        if (imgNode.getAttribute('src') == null) {
                            imgNode.setAttribute('src', imgNode.getAttribute('src-url'));
                            imgNode.removeAttribute('src-url');
                        }
                    }, 1000)
                })(i)
            }
        }
    }
</script>

</html>

最后呢，其实在for循环输出列表时可以先赋值一张伪图（也就是加载图片中gif类型的轻量级图片）给img标签的src，然后
在setAttribute图片替换这一步中用onload监听真的图片加载完了再把url赋值给src，这样就不会产生图片一段一段加载的感觉，这个看个人的项目需求吧。加油同志们，奥利给！

奥利给释义：
作为感叹词，包含了赞美、加油打气等多种感情色彩。

白嫖罚多人运动，请自重
。
。
。
。
。
。
。
。
。
。
不要误会

在这里插入图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML5: 学习指南

作爲前端的3劍客之一， 對於新手來說，有一個路線圖是極好的：

搁浅... 2020-07-08 08:18:48

Flutter: 学习指南

Flutter讓跨平臺更加高效。

搁浅... 2020-07-08 08:18:48

Netlify: 前端Vue/React自动化部署服务

Netlify在我以前的博文有介紹。 這裏打包這個“羣聊”項目，這裏只演示前端怎麼部署，後端是用express寫的，部署同理。   1. 上傳vue項目到Github上： vscode中提交併推送到Github上： 這時需要添加遠

搁浅... 2020-07-08 08:18:48

JS: 学习指南

js也沒得說，必學~   

搁浅... 2020-07-08 08:18:48

JavaScript继续深造

《深入理解javascript原型和閉包系列》 《深入理解javascript異步系列》 《換個思路學習nodejs》 《CSS知多少》 來源：https://www.kancloud.cn/wangfupeng/wangedit

文殊师利法王子 2020-07-07 14:43:00

内容居中css样式

body { width: 35em; margin: 0 auto; }

文殊师利法王子 2020-07-07 14:43:00

常见16进制颜色

常見的十六進制顏色碼 一、 三原色（紅、綠、藍） 紅色（red）： #FF0000 綠色（green）： #008000 藍色（blue）： #0000FF 二、 其他顏色 常見的單色 黑色（black）：

文殊师利法王子 2020-07-07 14:43:00

ElementUI和wangEditor冲突

在vue2.6的環境中使用npm install了wangEditor，因爲結合了Element UI，wangEditor的樣式變了，包括標題大小樣式無效，初始默認字體太少

文殊师利法王子 2020-07-07 14:43:00

快速查看各个.html文件的技巧

🚀在瀏覽器中輸入： file:///我的項目真實路徑 🚀可快速查看項目中的所有文件，如需頻繁查看刷新等，方便查看效果之類的 🚀雕蟲小技，隨便一記～

文殊师利法王子 2020-07-07 14:43:00

使用/deep/修改element-ui组件默认样式

寫法： [.自定義類名] /deep/ [.element組件名] 示例： <style scoped> .parentClass /deep/ .el-card { background: #3a3f51; } </

文殊师利法王子 2020-07-07 14:43:00

Element：注意版本问题

低版本的Element會有更多的Bug或者未完全引入所有組件，比如[email protected]裏面需要手動引入Link組件，如果沒有手動引入Link組件，在書寫<el-link>的時候，不但不會跳轉，還會報異常 vue.js:

文殊师利法王子 2020-07-07 14:43:00

Element表格内添加链接

<el-table-column prop="title" label="標題" sortable> <template slot-scope="scope"> <rou

文殊师利法王子 2020-07-07 14:43:00

router-link传递参数

<router-link :to="{ name: 'MyRouter', query: { username: '張三' } }" >點擊獲取用戶名</router-link > 在路由名爲MyRouter的組件中，進

文殊师利法王子 2020-07-07 14:43:00

Js全栈开发之koa2路由与mvc搭建初步

koa2路由與mvc搭建初步 接着上一篇《Js全棧開發之koa2初步搭建及基礎》來繼續學習koa2，上一篇只是簡單的瞭解一下koa原生的web服務搭建，實際的複雜項目需要很多中間件來提升開發效率，和減少編碼的複雜度，這篇主要涉及路

卷儿哥 2020-07-06 15:08:25

Js全栈开发之koa2中间件分离与数据层搭建

koa2中間件分離與數據層搭建 接着上一篇《Js全棧開發之koa2視圖層搭建》來繼續學習koa2，上一篇着重彙總講解了使用模板和靜態包拆分出視圖層的一些具體步驟，而沒有講解模型層，本篇將總結數據庫的訪問及模型層的搭建，以及從koa

卷儿哥 2020-07-06 15:08:25