Question

在我们的网站上，我们显示了样式化复选框的图标。图标是从SVG文件渲染的。这些图标在Edge浏览器中的加载速度非常慢（将近10秒钟）。它在IE和Chrome中运行良好。请提出一些选项以缩短Edge的图像加载时间。使用复选框PFB截屏。

实施细节

与复选框相对应的HTML元素是在从Web服务获得响应的同时动态添加的。逻辑是用纯JS实现的，样式是使用SASS完成的。

Answer 1

由于您使用的是Web服务来填充复选框，因此首先我们需要提高性能，因此您可以尝试使用F12开发人员工具或设置计时器来对其进行检查。此外，您还可以优化图像使用率，并尝试使用异步方法来调用Web服务。

此外，我认为（因为您未发布相关代码），我建议您可以尝试使用CSS或Javascript创建带有复选标记的自定义复选框，而不是使用SVG，因为使用CSS样式，添加新的复选框时，我们可以为其添加相关的CSS样式。

您可以参考以下代码：

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnAdd").click(function () {

            //call the web service to get the checkbox items.

            //add new checkbox items with CSS style. 
            $("#dynamiccontent").append("<label class='container'>TwoTwo<input type = 'checkbox' > <span class='checkmark'></span> </label >");
        });
    });
</script>

HTML代码：

<input type="button" id="btnAdd"  value="Add"/>
<div id="dynamiccontent">
    <label class="container">
        One
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
    </label>

    <label class="container">
        Two
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
</div>

CSS样式：

<style type="text/css">
    /* Customize the label (the container) */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
</style>

结果如下：

参考：How TO - Custom Checkbox

Edge浏览器中的图标渲染非常慢

1 个答案: