如何用Jquery获取加载的回调CSS文件、JS文件、字体文件。

Question

我正在为Page loader制作javascript，这是其中的一部分。

$('img').each(function () {
    var src = $(this).attr('src');
    $('<img>').attr('src', src).on("load", function () {
        alert("Loaded one of thme");
    });
});

我可以从这里获得回调，img文件也是可以的，但如何获得CSS文件和JS文件的回调，尤其是字体文件？

但如何获取CSS文件和JS文件的回调，尤其是字体文件？

敬请指教。

我是这样解决的。这是否只是针对我的情况。

在HTML中，把字体的链接标签。任何地方都可以。

<link as="font" href="/fonts/font01.woff">
<link as="font" href="/fonts/font02.woff">
<img src="/img/img01.jpg">
<img src="/img/img02.jpg">

接下来JS。

var fonts_length = $('link[as="font"]').length;
var resouce_num = $('img').length + fonts_length;

$('img').each(function () {
    var src = $(this).attr('src');
    $('<img>').attr('src', src).on("load", function () {
        loadStatus++;
    });
});
$('link[as="font"]').each(function () {
    var href = $(this).attr('href');
    $(document).load(href, function () {
        loadStatus++;
    });
});

并比较loadStatus(加载文件数)和resouce_num(需要加载文件数)。

这样使用是否正确？我不知道，但是用起来很好，应该没问题，你觉得怎么样？如果你有更好的方法或者发现我的错误，请告诉我。

还有B--rian！请把我的英语也改改吧！！！！！！！！。

我找到了另一个。

https:/developer.mozilla.orgen-USdocsWebHTMLElementlink#Stylesheet_load_events。

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Do something interesting; the sheet has been loaded
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">

重要说明

注意：一旦样式表和所有导入的内容被加载和解析，在样式开始应用到内容之前，加载事件就会发生。

这个方法我觉得很简单，但是今天太累了......以后我再试试。

////////////////////////////////////////////////////////////////添加 我的尝试在515

我试了上面的功能，但 "onload "功能不好用，加载后不发回调。

加载后没有发送回调......。是Chrome有问题，还是我的错误？

或者说这种方式对页面加载器不好，我想。

因为，即使这样做很好，也不能检查每个字体文件的加载情况。

我觉得，页面加载器应该用进度条之类的东西来显示一个临时的进度百分比。

所以，现在我又回到了我的示例脚本。

Answer 1

CSS文件。

// create a nodeElement
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = url;
document.head.insertBefore(node, document.head.firstChild);
// try to set load callback
node.onload = function () {
    CSSDone('onload listener');
    // do your callback
}
if (node.addEventListener) {
    node.addEventListener('load', function() {
        CSSDone("DOM's load event");
        // do your callback
    }, false);
}
node.onreadystatechange = function() {
    var state = node.readyState;
    if (state === 'loaded' || state === 'complete') {
        node.onreadystatechange = null;
        CSSDone("onreadystatechange");
        // do your callback
    }
};
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        CSSDone('listening to styleSheets.length change');
        // do your callback
        clearInterval(ti);
    }
}, 10);

你可以看到这个 联系 参考

JS文件。

// create a nodeElement
var body = document.getElementsByTagName('body')[0];
var node = document.createElement('script');
node.setAttribute('type', 'text/javascript');
node.setAttribute('src', url);
body.appendChild(node);
// try to set load callback
if(node.onload){
   node.onload = function() {
       // do your callback
   }
}else{
   // for some not support onload
   node.onreadystatechange = function() {
       // do your callback
   }
}

字体文件。

document.fonts.onloadingdone = function() {
    // do your callback
}

如何检查加载的字体文件可以参考这个 联系

emm，我是新来的，如果有什么不对的地方可以回复我，谢谢。

Answer 2

如果你想打印出一个.css或.html文件的内容，你可以用php来实现。

<?php
    $myfile = fopen("your_file", "r") or die("Unable to open file!");
    echo fread($myfile,filesize("your_file"));
    fclose($myfile);
?>