加载DOM和CSS但不加载图像后，如何触发javascript？

Question

在加载DOM和CSS之后，我需要启动一些JavaScript，但不能启动图片。 我相信那是在document.ready之后，但在window.onload之前。 有人知道如何实现这一目标吗？

我本来是想通过document.styleSheets进行迭代在document.styleSheets之后加载CSS，但这感觉不是一个好主意。

更新：出现这种异常要求的原因是，我需要预测将要渲染的图像的大小，该大小由css确定。 将javascript移至页面底部即可解决此问题，但我希望我的脚本在情况并非如此时也能正常工作。

Answer 1

您需要DOMContentLoaded事件，以及在所有样式表之后链接的外部脚本。

从链接页面：

如果在<link rel="stylesheet" ...> <script>之后有<script>在加载样式表之前，页面将无法完成解析-并且DOMContentLoaded将不会触发。

Answer 2

您可以尝试使用一个小的图像，并将处理程序添加到其onload事件中，请参见image.onload事件和浏览器缓存将带有该小图像的代码添加到document.ready。

请您能详细说明一下您的用例，为什么将代码放在document.ready事件处理程序上对您没有帮助？

---

另一个选择是将处理程序附加到每个样式标签的加载上，并且每个此处理程序增加一些计数器，如果counter = style tags计数，则您将同时检查该计数器。 （您可以在添加事件处理程序的同时确定样式标签的数量）。 当计数器达到样式标签的数量时，您可以触发您的自定义事件，该事件可用于运行代码。 但是，如果某些样式表由于某种原因无法加载，则此操作将失败，因此，如果上述逻辑失败，我建议添加一个后备代码以在window.onload上执行代码。

Answer 3

首先执行DOMContentLoaded 。

但

如果我将这样的图像放在html中。 并且此图像被缓存，然后图像加载在DOMContentLoaded之前执行。

html

<img onload="console.log('imgLoaded');" src="http://placekitten.com/16/16">

js

window.addEventListener('DOMContentLoaded',function(){
 console.log('DOMContentLoaded')
},false);

演示

http://jsfiddle.net/yE9qU/

输出：

• DOMContentLoaded
• img已加载
• imgLoaded <-----错误
• DOMContentLoaded

也无法将onload事件直接放在图像上。

http://jsfiddle.net/yE9qU/1/

输出：

• 10 10
• 10 10
• 16 16 <-----错误
• 10 10

这意味着在所有内容加载之前无法获得正确的CSS分配大小 ...因此在window.onload之后

解决方案...

取决于您的需求。

1. 如果没有太多图像，我将在执行 load或DOMContentLoaded 之后添加它们 。

2. 就像您说的那样将脚本放在页面底部。 但不能确定图像是否已经缓存。

3. 一种。 在所有内容加载后进行数学运算 （仅几毫秒）

4. b。 隐藏图像，直到完成数学运算为止。

如果您确切地说明了为什么在那一刻需要图像尺寸的原因，那么我们很容易找到合适的替代解决方案。