为动态图像生成 CSS 精灵

2024-04-21

我有一个网页,其中包含大约 20 - 50 个动态图像(从非静态源提供的图像)。这些图像通过基于请求 URL 的 servlet 提供。这会导致每个图像生成一个请求,从而导致性能下降。

如果这些图像是静态的,我将创建一个 CSS 精灵并用一个请求替换 50 个请求。由于它们是动态的,这当然不是那么容易。我正在寻找一个可以使用的工具/库/方法,以便在运行时将这些图像聚合到单个精灵中。幸运的是,图像大小是恒定的,并且对于所有图像来说都是相同的,这应该会使这变得更容易。

有什么建议么?


您可以检查并尝试下颌(https://jawr.dev.java.net/ https://jawr.dev.java.net/)用于在 servlet 上生成/修改(也压缩、合并)css 文件的库。它可以选择动态更改背景图像。 您可以安排捆绑包来切换 css 文件以更改皮肤。

优点:您还可以管理和排列您的 .js 文件!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为动态图像生成 CSS 精灵 的相关文章

  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 从 html 属性中删除单引号和双引号,并且除 href 和 src 之外的所有属性上都没有空格

    我正在尝试从 html 属性中删除单引号和双引号 这些属性是没有空格的单个单词 我写了这个有效的正则表达式 type title data toggle colspan scope role media name rel id class
  • JavaScript 中带前导零的数字发生变化

    我使用 print 语句从 php 调用 javascript 函数来打印 html 代码 并且传入一个整数 但是 在 php 中传递的值与 javascript 函数接收到的数字不匹配 我不知道为什么 这是调用 javascript 函数
  • HTML5 仅拖放图像

    我想做的是 如果所有拖动的文件都是图像 则将其删除 但如果有其他文件扩展名 则不要删除它们 而仅删除图像 这是我的尝试 HTML div div JavaScript var dropzone document getElementById
  • 如何使用文件输入在PDFJS中打开本地PDF?

    我想知道是否有办法使用选择pdf文件input type file 并使用打开它PDFJS https github com mozilla pdf js 您应该能够使用 FileReader 来获取文件对象的内容作为类型化数组 pdfjs
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 位图内存不足错误

    我对这个错误有疑问 我从 URL 制作网站图标解析器 我这样做是这样的 public class GrabIconsFromWebPage public static String replaceUrl String url StringB
  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作?

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 如何使跨度标签不可删除?

    我正在尝试使 contenteditable div 内的跨度标记不可删除 div Editable span Read Only span div 只读范围确实是只读的 但我可以通过单击删除键来删除整个范围 有没有一种属性方法可以告诉sp
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • HTML 代码中的 PHP [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我用 HTML 代码编写了 PHP div div 但这出现在输出页面中 else print 我怎样才能让PHP执行 你的文件有一个 p
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir
  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗?

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi

随机推荐

  • Angular2 Ng2文件上传CORS问题

    我是新来尝试angular2 我已经安装了 angular2 文件上传 我复制了教程中的所有代码here http valor software com ng2 file upload 我完全复制了开发人员在那里写的内容 但我遇到这样的问题
  • 有没有办法使用 flutter ping 本地 IP 地址?

    我想检查特定设备是否连接到我的网络 我有该设备的 IP 地址 我无法找到使用 flutter 应用程序 ping 该设备的方法 这里的目标是通过 ping 设备来检查特定设备是否连接到本地网络 你能帮我吗 用这个 import dart i
  • 源注释.h ? C++ [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions Visua
  • 在SPARQL中使用LIMIT时如何获取结果总数?

    我有一个 SPARQL 查询 它返回结果LIMIT共 20 个 在此查询中 我还想知道结果总数 而无需运行查询两次 一次运行LIMIT和一个没有LIMIT 例如 运行查询时 可能的结果总数为 500 个 其中LIMIT它一次只显示 20 个
  • 如何发送元数据 HTTP POST 请求

    假设我想发送这些类型的请求 其中 json 数据中有 meta 我该如何处理 我把它作为 json 数据 amount 500 narration Test Int l bank transfers currency USD benefic
  • 如何启动一个新的大型 ZF2 项目?

    我将使用 ZF2 创建一个新项目 事实上 我必须升级 ZF1 项目 但我决定从头开始 我的项目非常庞大 已经被来自世界各地的志愿者翻译成 10 种不同的语言 我遇到的困难是分析 ZF2 告诉我要遵循的模块结构 该软件允许 ISP 领域的中小
  • 如何使用 Selenium 找到文本位置?

    我正在尝试使用 Selenium 查找网页上某些文本的位置 我可以使用 isTextPresent 函数来告诉我文本是否出现 但随后我想知道它实际在哪里 更广泛的问题是我想单击此文本 问题是我似乎无法单击此文本 我认为该文本位于页面上嵌入的
  • sqlalchemy中查询相关表

    所以我有两个表 员工 和 详细信息 如下所示 class Employee Base tablename employees id Column Integer Sequence employee id seq primary key Tr
  • 如何在 ASP.NET 5 中使用基于 IAppBuilder 的 Owin 中间件

    ASP NET 5 ASP NET vNext 与 Katana 一样基于 OWIN 但具有不同的抽象 尤其IAppBuilder已被替换为IApplicationBuilder 许多中间件库依赖于IAppBuilder并且尚未更新以支持
  • 使用多个条件查找所有结果

    我有一个包含多列的表 我想使用条件过滤表并接收包含匹配项的范围 1 我知道我可以使用循环轻松地在表中进行迭代 或者 2 我可以在列中添加过滤器 我不喜欢 1 因为表中的迭代太慢 但我可以做到这一点 Excel 是否有一种函数可以一步返回按特
  • BigQuery更新如何获取更新的行数

    我正在使用 Google Cloud Functions 连接到 Google Bigquery 数据库并更新一些行 云函数是使用Python 3编写的 当我通过函数运行更新 dml 时 我需要帮助弄清楚如何获取结果消息或更新 更改的行数
  • dplyr 0.3 无法inner_join data.table?

    我有以下设置并加载了 dplyr 0 3 和 data table 1 9 3 R version 3 1 1 2014 07 10 Platform x86 64 apple darwin10 8 0 64 bit locale 1 en
  • 是否可以直接从文件加载镶木地板表?

    如果我有一个二进制数据文件 可以转换为 csv 格式 有什么方法可以直接从中加载镶木地板表吗 许多教程显示将 csv 文件加载到文本表 然后从文本表加载到镶木地板表 从效率的角度来看 是否可以像我已有的那样直接从二进制文件加载镶木地板表 理
  • Android html5 输入 type="password" 和数字键盘

    我的任务是为 Android 和 iOS 设计一个网页 您应该在其中输入您的信用卡信息 我无法获取在 Android 中打开数字键盘的安全代码字段 这是我距离最近的一次 它适用于 iOS 但不适用于 Android
  • 用三种颜色的渐变填充面板

    我正在做一个项目 我必须使用 C 做一种颜色选择器 所以我决定在 Win Forms 应用程序中建立一个具有此背景的面板 背景应具有 RGB 三种颜色的渐变 红色 0 255 蓝色 0 255 和绿色 0 但我找不到任何关于我应该为此使用什
  • 模板组件启动器内的离子标签组件未渲染

    我克隆了stencil component starter from https github com ionic team stencil component starter https github com ionic team ste
  • Android 上未原生找到 RNFirebase 核心模块

    我正在尝试在 Android 平台上运行现有的 React Native 应用程序 但收到如下图所示的错误 我已经执行了下面提到的所有步骤http invertase link android http invertase link and
  • Ionic2 - 如果超时则取消 Api 请求

    在我的应用程序中 我通过表单保存数据并调用 Api 进行相同的操作 为了检查它们的互联网连接是否缓慢 我在 ionic2 中使用超时 如下所示 savedata let headers new Headers headers set Con
  • 创建较慢的过渡。 TransitionManager.beginDelayedTransition();太快了

    我正在创建一个过渡 当单击按钮时 将执行以下方法 该方法改变了图像视图的大小和位置 并将其淡出 我在用TransitionManager beginDelayedTransition is too fast 放慢转变速度 但它仍然进展得太快
  • 为动态图像生成 CSS 精灵

    我有一个网页 其中包含大约 20 50 个动态图像 从非静态源提供的图像 这些图像通过基于请求 URL 的 servlet 提供 这会导致每个图像生成一个请求 从而导致性能下降 如果这些图像是静态的 我将创建一个 CSS 精灵并用一个请求替