Question

我有30个科目/题目，每个科目/题目左侧都有一个图标。我使用<img>和<p>代码使我的图标和文字看起来像我想要的方式但是，一旦我检查了网站的速度，我就会收到以下警告：

此页面向mywebsite.com发出39个可并行化的请求。通过跨多个主机名分发这些请求来增加下载并行化：

有没有方法可以在没有<img>标记的情况下执行此操作并获得相同的结果（参见图片）？

HTML

<div class=" row gi-icon-padding"> 
                        <div class="col-xs-3 col-sm-3 gi-icon" >
                        <div data-aos="fade-up">
                            <img class="img-responsive" src="img/gi_icons/19b.png" />
                        </div>
                        </div>

                        <div data-aos="fade-down" >
                            <p class="col-xs-9 col-sm-9 gi-name">Autoimmune Hepatitis </p>
                        </div>
                    </div>

CSS

.gi-icon-group {
    padding-top:30px;

    .gi-icon-padding {

        padding-bottom: 20px;
    }

    .gi-icon {
        width: 55px;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 10px;

    }

    .gi-name {
        padding-top: 10px;
        padding-left: 0;
        font-size: 18px;
        line-height:20px;

    }

}

Answer 1

您可以使用CSS精灵。例如，以下是Google在其搜索引擎结果页https://www.google.com/images/nav_logo242.png

上使用的精灵

为此，您基本上将所有图片合并到一个文件中，然后使用该文件在通常使用background-image的地方投放img。以下是Google精灵的示例，或者您可以在google.com上查看SERP

＆＃13;

.sprite {
  background: url('https://image.ibb.co/jiP6Y5/nav_logo242.png') no-repeat;
  display: inline-block;
  vertical-align: middle;
}

.logo {
  width: 125px;
  height: 40px;
  background-position: -20px 0;
}

.plane {
  width: 20px;
  height: 19px;
  background-position: -80px -192px;
}

＆＃13;

<div><span class="sprite logo"></span>text</div>
<div><span class="sprite plane"></span>text</div>

＆＃13;

如何在图标旁边添加文字并避免可并行化的请求？

1 个答案: