如何检查是否所有的CSS文件都被下载使用JavaScript插入HTML吗？ [英] How to check if all CSS files have been downloaded to insert HTML using JavaScript?

问题描述

我要动态插入JS通过一些HTML内容和一些CSS的URL。

I want to dynamically insert some HTML content and some CSS urls through JS.

我有3 + CSS文件。我想我的内容被插入到页面之前，他们被下载。

I have 3+ CSS files. I want them to be downloaded before my content is inserted on the page.

有没有办法找出是否上述文件已经下载？

Is there a way to find out whether the above-mentioned files have been downloaded?

这是它应该如何工作的：

This is how it should work:

• 在下载css文件;
• 所有的CSS文件都被下载后，显示HTML;
• 启动加载插入的HTML后，JS文件;
• 已加载的所有的JS文件后，触发回调;

推荐答案

您可以使用 YepNope.js ，YepNope允许你建立异步条件测试，看资源是否已加载。一旦你的测试已经过去了，你可以告诉它注入新的CSS或JS文件。

You could use YepNope.js, YepNope allows you to build asynchronous conditional tests to see whether resources have loaded. Once your tests have passed you can tell it to inject new CSS or JS files.

下面的例子已采取从YepNope.js网站。

Example below has been taken from the YepNope.js site.

yepnope.injectCss( stylesheetSource [, callback ] [, elemAttributes ] [, timeout ]);

// Example
yepnope.injectCss("print.css", function () {
  console.log("css injected!");
}, {
  media: "print"
}, 5000);

您甚至可以YepNope，然后再加载最初的CSS文件，一旦他们完成加载YepNope可以触发一个回调做其他任务，如加载更多的JS和CSS文件。

You can even make YepNope load the initial CSS files first and then once they have completed loading YepNope can trigger a callback to do additional tasks, such as loading more JS or CSS files.

这篇关于如何检查是否所有的CSS文件都被下载使用JavaScript插入HTML吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！