jqgrid - JQGrid 如何从单个文件加载图标

Question

当我搜索 JQGrid 使用的图标时，我找到了包含所有图标的单个 PNG 文件。我想知道它如何使用图像的一部分作为 JQGrid 中使用的按钮的图标。

Answer 1

jqGrid 使用来自 jQuery UI 主题的图标。在一个 PNG 文件中使用多个图标(图片)是标准优化。如果多个文件中有一个单独的图标，则由于往返时间，加载每个单独的文件需要很长时间。即使是多个文件将被并行加载(多个并行 HTTP 请求)加载一个文件更有效。

因此，如果您检查 jQuery UI 的 jquery-ui.css(例如 here)，您会发现以下内容

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_f9bd01_256x240.png);
}
.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
...

网格主体的每一行都有类“ui-widget-content”。因此图标将来自具有相对 URL images/ui-icons_469bdd_256x240.png 的图像(请参阅 .ui-widget-content .ui-icon 的 CSS 规则):

在另一边，寻呼机有类“ui-state-default”。因此图标将来自具有相对 URL images/ui-icons_6da8d5_256x240.png 的图像(请参阅 .ui-state-default .ui-icon 的 CSS 规则)和等等。

因此所有图标将从一个文件加载。所有图标的高度和宽度都相同16px，但不同的图标有不同的background-position。因此将使用索引的不同 16x16 像素部分。

优化方法的名称为 Image Sprites。你可以阅读它here .有一些服务器解决方案允许将从 CSS 文件引用的许多图像(PNG 和 GIF 图像，但不是 JPG)组合成服务器上的单个大图像动态(参见 here) . Internet 上也有一些地方(如 here )允许您上传多个文件并获得一张组合图像。无论如何，该解决方案已经很老了，网络开发人员将大量使用它。