SVG внутри цикла v-for вызывает замедление загрузки страницы - PullRequest
0 голосов
/ 04 декабря 2018

Я использую SVG внутри component с именем SvgIcons.vue следующим образом: -

<template>

        <div class="svg__icon" v-if="iconType">

            <svg :height="dimension" :width="dimension" v-if="iconType == 'rss_icon'" xmlns=" "
                 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 11.968">
                <g id="blogpost_icon_active" transform="translate(-77 -178)">
                    <g id="Group_42" data-name="Group 42" transform="translate(77 178)">
                        <ellipse  :class="className"  id="Ellipse_25" data-name="Ellipse 25" class="cls-1" cx="1.641" cy="1.641" rx="1.641" ry="1.641" transform="translate(0 8.649)"/>
                        <path  :class="className"  id="Path_135" data-name="Path 135" class="cls-1" d="M1308,266.988v2.279a5.583,5.583,0,0,1,3.957,1.6,5.48,5.48,0,0,1,1.641,3.957h2.334a7.726,7.726,0,0,0-7.932-7.841Z" transform="translate(-1308 -262.897)"/>
                        <path  :class="className"  id="Path_136" data-name="Path 136" class="cls-1" d="M1308,246.873v-2.3a11.951,11.951,0,0,1,8.37,3.374,12.4,12.4,0,0,1,3.629,8.589h-2.316a10.124,10.124,0,0,0-2.845-6.82A9.654,9.654,0,0,0,1308,246.873Z" transform="translate(-1308 -244.57)"/>
                    </g>
                </g>
            </svg>

        </div>
    </template>

    <script>
        export default {
            props: ['iconType', 'className', 'dimension'],
            methods: {

            },
            computed: {

            },
            created () {
                console.debug(this.iconType)
            }

        }
    </script>

Я добавляю этот компонент в другие vue-component, чтобы сделать SVG встроенным, как это: -

 <div class="article_box_grid only_article_box_grid" :key="'grid_' + post._source.id "
         v-for="(post, index) in getPosts">
        ......Other code......
        <svg-icons iconType="rss_icon" dimension="14" className="orangeColor"></svg-icons>
    </div>

У меня более 4 иконок для одного элемента цикла.Когда страница загружается, то я получаю это предупреждение в консоли более 200+ раз, а загрузка страницы занимает больше времени: - WARNING: Too many active WebGL contexts. Oldest context will be lost. Я делаю что-то не так или есть какой-либо другой безопасный способ загрузить значок SVG внутри v-forцикл в Vue?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...