如何让浏览器(IE和Chrome)在脚本之前请求图像?

2024-04-24

Note:如果您是第一次阅读本文,您可以直接跳到更新,因为它更准确地解决了问题。

所以我得到了一个网页。

在头部我有一个 CSS 背景图像:

<style>
    #foo { background-image:url(foo.gif); }
</style>

在页面底部我加载我的脚本:

<script src="jquery.js"></script>
<script src="analytics.js"></script>

由于脚本位于页面底部,CSS 位于页面顶部,我假设浏览器将首先加载图像。然而,情况似乎并非如此。

这是 Chrome 开发工具的屏幕截图:

http://www.vidasp.net/media/cssimg-vs-script.png http://www.vidasp.net/media/cssimg-vs-script.png

As you can see, the image loads after the scripts. (The vertical blue line is the page load DOMContentLoaded event. The huge 45ms gap is the time in which Chrome parses the jQuery source code.)

现在,我的第一个问题是:

这是浏览器中的标准行为吗? CSS 背景图像是否总是在页面上的所有脚本之后加载?

如果是,我如何确保这些图像在脚本之前加载?有没有简单方便的方法解决这个问题呢?


UPDATE

我做了一个测试用例。这是 HTML 源代码:

<!DOCTYPE html>
<html>
<head>
    <style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
    <div> <img src="image2.jpg"> </div>
    <script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
    <script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>

如您所见,我有一张 CSS 背景图像、一张常规图像和两个脚本。现在结果是:


互联网探索者(9 测试版)

http://www.vidasp.net/media/loadorder-results/ie2.png http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.png http://www.vidasp.net/media/loadorder-results/ie1.png

Internet Explorer 首先请求常规图像,然后请求两个脚本,最后CSS 图片放在最后.


火狐 (3.6)

http://www.vidasp.net/media/loadorder-results/firefox2.png http://www.vidasp.net/media/loadorder-results/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.png http://www.vidasp.net/media/loadorder-results/firefox1.png

Firefox 做得对。所有资源均按照它们在 HTML 源代码中出现的顺序进行请求。


CHROME(最新稳定版)

http://www.vidasp.net/media/loadorder-results/chrome2.png http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png http://www.vidasp.net/media/loadorder-results/chrome1.png

Chrome 演示了让我首先写这个问题的问题。在图像之前请求脚本。


歌剧 (11)

http://www.vidasp.net/media/loadorder-results/opera1.png http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png http://www.vidasp.net/media/loadorder-results/opera2.png

像火狐浏览器一样,Opera 也做得对. :D


总结:

  • Firefox 和 Opera 正在请求源代码中显示的资源。

例外情况,所以这条规则:

  • Internet Explorer 最后请求 CSS 背景图像
  • Chrome 在图像之前请求脚本,即使脚本稍后出现在源代码中

现在我已经阐述了这个问题,让我继续我的问题:

如何让 IE 和 Chrome 请求 脚本之前的图像?


如今,大多数最新的浏览器都支持这种不可预测的并行预加载内容,出于性能原因,基本上破坏了创建加载组件的顺序的任何机会。这当然会在完整的 DOM 加载完成后发生。 与 相同的故事JQuery 延迟加载图像 http://www.appelsiini.net/projects/lazyload,现在已经坏了一段时间了。

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

如何让浏览器(IE和Chrome)在脚本之前请求图像? 的相关文章

  • 匹配 JavaScript RegEx 中的不可见字符

    我有一些包含不可见字符的字符串 但它们位于可预测的位置 通常 围绕我想要提取的文本片段 然后在第二次出现之后我想保留文本的其余部分 我似乎不知道如何关闭隐形字符 and将它们从我的结果中排除 为了匹配隐形 我一直在使用这个正则表达式 xA0
  • 如何设置黄瓜环境变量

    我有以下 package json name newcucumber version 1 0 0 main index js scripts test node modules bin cucumber js firefox node mo
  • 传单圆圈绘制/编辑问题

    我第一次制作传单 并面临绘制圆圈和编辑 更改圆圈位置 的问题 我面临的问题是 编辑 移动 圆从一个位置到另一位置会改变其半径 Note 请尝试在给定的小提琴中在地图顶部创建圆圈 然后通过单击编辑按钮将其移动到底部 如果我在地图的顶部创建圆圈
  • 递归链接 Promise

    我正在开发一个简单的 Windows 8 应用程序 我需要在其中从网站获取一组数据 我正在使用 WinJS xhr 来检索此数据 它返回一个 Promise 然后 我将回调传递到此 Promise 的 then 方法中 该方法为我的回调提供
  • Node.js 循环发送 http 请求

    我实际上遇到了使用 node js 执行的 javascript 代码的问题 我需要循环发送http请求到远程服务器 我在代码中设置了www google ca 这是我的代码 var http require http var option
  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击?

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo
  • 如何在正则表达式中区分数字和ip地址?

    例如 如果我们查看 5 56 和 183 55 0 144 基本上 当你做这样的事情时 d d 它匹配 5 56 189 55 和 0 144 有没有办法通过正则表达式仅匹配数字而不匹配 ip 地址的部分 我尝试使用前瞻 但我不知道它应该是
  • 如何使用 ui-router 中的 ui-sref 将参数传递给控制器

    我需要传递和接收两个参数到我想要转换到的状态ui srefui router 的 例如使用下面的链接将状态转换为home with foo and bar参数 a Go to home state with foo and bar para
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys
  • 从数据库中给定时间起经过的时间

    我有一个 HTML 表 其中包含从数据库中提取的记录 我正在使用 PHP MySQL 我的表中名为 Timer 的列未从数据库中检索 我需要在此处显示经过的时间 从数据库中的特定时间开始 例如 假设现在的时间是2013年2月21日下午6点2
  • JQuery 验证不起作用

    我有一种表单 其中一个输入类型的值为 名字 但这可以在 onfocus 函数上更改我想验证此输入字段 如果它为空白或 名字 我有两个 jQuery 文件jquery 1 4 2 min js jquery validate pack js
  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin
  • 如何使用 jQuery 以编程方式单击 Gmail 中的“显示下面的图像”?

    我正在创建一个 Google Chrome 扩展程序 它使用 jQuery 在 Gmail 中添加了 显示下面的图像 链接的键盘快捷键 我尝试了以下方法来模拟点击 但未成功 canvas frame contents find span c
  • 如何使用正则表达式解析 OCC 选项符号?

    OCC 选项符号由 4 部分组成 标的股票或 ETF 的根代码 用空格填充至 6 个字符 到期日期 6 位数字 格式为 yymmdd 期权类型 P 或 C 用于看跌或看涨期权 执行价格 为价格 x 1000 前面填充 0 至 8 位数字 举
  • 我应该采取什么圆角方法?

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互
  • 如何设置 .eslintrc 来识别“require”?

    我是新来的ESLint http eslint org 并且我已经成功地将 ESLint 与IntelliJ https www jetbrains com idea 开箱即用 我的 ESLint 集成无法识别node 但对文档的基本审查表
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code
  • angularjs 将 ngModel 从包装器指令传递到包装器指令

    我是 Angular 的新手 但仍然痛苦地纠结于自定义指令 我想重用这段 HTML
  • 如何防止 Safari 滚动溢出:隐藏的 iframe?

    使用 Safari 您可以通过设置 style overflow hide 来禁用大多数 iframe 滚动 在 iframe 上 但是 如果您单击 iframe 并移动鼠标 内容无论如何都会滚动 Example 滚动内容 html

随机推荐