jQuery:按需加载css +完成回调
jQuery:按需加载css +完成回调
提问于 2010-08-17 01:23:09
我想按需加载CSS文件(按例)。运行一个返回要加载的CSS文件的XML请求)，例如style1.css，style2.css .
那么，在jQuery (或插件)中有什么方法可以解决这个问题吗？
- 批量加载多个文件+将所有CSS-文件添加到dom中。
- 完成加载时:触发回调(例如警告“所有样式表都已完成加载！”)；
其思想是:通过xmlhttp加载xmlhttp，加载+添加所需的css-文件，然后-在完成任何操作后，显示该html。
知道吗？
谢谢！
Stack Overflow用户
发布于 2016-09-29 15:31:45
解决办法可以改进一点我想..。首先，当您使用以下代码行时：
...
$.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
...您实际上正在进行两个调用来检索css:第一次是在$.get本身，第二次是将<link>附加到head中。移除$.get也将检索css，但只检索一次：
...
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
...但如果你需要做更多的事情(如。(加载脚本文件)在调用回调函数之前检索这些css时，我认为更好的方法是使用答应而不是when...then解决方案。你可以这样做：
var requests = []; //array which will contain every request we want to do before calling the callback function
$.map(urls, function(url) { //urls is the array of css files we want to load
var defer = $.Deferred();
defer.promise();
//we add the deferred object to the requests array
requests.push(defer);
var cssEl = $('<link>', { rel: 'stylesheet', type: 'text/css', 'href': url });
cssEl.appendTo('head').on("load", function() {
defer.resolve();
});
});
var anotherRequest = $.ajax({...}); //eg. a script file
requests.push(anotherRequest);
$.when.apply($, requests).done(function() {
// callback when all requests are done
});这样，如果有些css需要一段时间才能加载，那么在检索所有这些css之前，将不会执行回调函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3498647
复制相关文章
相似问题
腾讯云开发者
