Let's take a look at the effect diagram to be implemented first
The code is as follows
In some cases, the resource fails to load, but the page needs to be displayed. Here I skipped the situation of failure, if necessary, you can consider a new resource to load
Attention matters
1, testing time, need to put the file on the server, go to the local file protocol is not see the effect of
2, test time, you can set the network to 2g or 3g, you can easily see the progress of loading, and then prohibit the use of caching
Expand
Here only to monitor the IMG format, if necessary, you can add JS and CSS in the
Note: listen to JS or CSS, you need to create the resources to append to the page, or listen to the onload and OnError events
<script>
var script_arr = [' http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js ', ' http://cdn.bootcss.com /jquery/3.0.0-rc1/jquery.js ', ' http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.slim.min.js '];
var nums = script_arr.length;
var start = 0;
for (var i in Script_arr) {
var script = document.createelement (' script ');
SCRIPT.SRC = Script_arr[i];
(function (j) {
document.body.appendChild (script);
Script.onload = function () {
start++;
if (start = = nums) {
console.log (' Full load complete ');
}
document.getElementById (' loading '). Style.width = (start/nums) *100 + '% ';
};
Script.onerror = function () {
start++;
Console.log (Srcript_arr[j] + ' failure ');
document.getElementById (' loading '). Style.width = (start/nums) *100 + '% ';
}
} (i);
}
</script>
Summarize
The above is the entire content of this article, the realization of this function is very practical, I hope to be able to study or work to bring certain help, if you have questions you can communicate.