how to get loaded callback CSS files, JS files, font files with Jquery

Question

I am making javascript for Page loader. This is part of it.

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

I can get callback from this, img files are OK.

But how to get callback of CSS files and JS files, especially font files?

regard.

/////////////////// add My resolve at 5/14

I resolved like this. Is this for just my case.

In HTML, Put link tags for fonts. Any where OK.

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

Next 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++;
    });
});

And Compare loadStatus(loaded files count) and resouce_num(need load files count).

Is this correct using? I do not know, but working well, should be alright. how do you think? If you have better way or found my mistake, tell me please.

And B--rian! please fix my english too!!

/////////////////// add Other nice way at 5/14

I found other one.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#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">

important Note:

Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

This way is much simple I thought. But today I am so tired...later I will try.

/////////////////// add My trying at 5/15

I tried above one.But "onload" function is not working well.

It does not send callback after loaded... Chrome has problem? or My mistake?

Or this way is not nice for Page loader, I thought.

Cos, Even If that is working well, Can not check each loading of font files.

I think, Page loader should tell a temporary percentage of progress with a progress bar or something.

So, Now I am back to my sample script.

Jing Jiang · Answer 1 · 2020-05-13T04:18:53.737

CSS files:

// 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);

you can see this link for reference

JS files:

// 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
   }
}

font files:

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

how to check font files loaded can refer this link

emm,I am New contributor.if there are some wrong can reply me.thanks

Thanks Jing Jiang! Those are great samples! But it is going to be bit mess... I try just to get font files loading callback at least. Muu, is there good plugin for page loader?? or make by myself.... — pa22le, May 13 '20 at 06:50
sorry,i did not find some similar plugin use google. maybe you need develop the plugin by yourself, em, or open source in github? good luck. ( this is my second answer on the stackoverflow,thank you. QAQ — Jing Jiang, May 13 '20 at 07:32
Oh your searching is very good! I try to make Page loader by myself. Difficult point is to combine these resource and counts...or is it easy? Fear often exaggerates danger. Thanks! — pa22le, May 14 '20 at 02:02

score 0 · Answer 2 · answered May 13 '20 at 03:22

0

If you are trying to print out the contents of a .css or .html file, you can do this with php:

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

answered May 13 '20 at 03:22

Nate

54
8

Thanks Nate san! But It seems like just "file size", not "loaded callback". I need to get callback of after loaded – pa22le May 13 '20 at 03:53

how to get loaded callback CSS files, JS files, font files with Jquery

2 Answers2