I have a web page where content is displayed depend of week day and selected hour.
Visitor can change day and hour and want to see content on Leaflet map.
Each day contain about 100 js files with size about 900k each.
I don't want to load all files for 7 days (7 * 100 = 700 * 900k = 615MB)
Particular day and hour has only one file with 900kb size and should be changed/loaded when visitor will change it.
Each file has name like : day_time.json; i.e. day0_0900.js, day1_1200.js, day5_1800.js
I tried declare global variable (var mydailydata;) at the beginning of global js file then use functions :
function loadScript(url, callback)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
var myPrettyCode = function() {
console.log("Loaded");
};
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
and load js file into head or body via :
loadjscssfile("data/day0_0900.js", "js");
and change URL with function responsible for changing day & time.
I can see <script type="text/javascript" src="data/day0_0900.js"></script>
in source code but content is not visible on web page.
at the beginning of data file I have :
var mydata = [{....}] and when I enter <script type="text/javascript" src="data/day0_0900.js"></script> statically into section of index file, content is displayed but only for particular day and time.
