in the process of dynamically creating script and img, why can img request resources immediately after assigning src, while script must be added to the page to load resources
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var img = new Image();
img.src = "./function.JPG";
img.onload = function(){
console.log("");
}
setTimeout(function(){
console.log("10");
document.getElementsByTagName("body")[0].appendChild(img);
},10000)
/*
10 --->10s
*/
//createElement
var img2 = document.createElement("img");
img2.src = "./function.JPG";
img2.onload = function(){
console.log("");
}
setTimeout(function(){
console.log("10");
document.getElementsByTagName("body")[0].appendChild(img);
},10000)
/*
10 --->10s
*/
var script = document.createElement("script");
script.src = "./zepto.js";
script.onload = function(){
console.log("script");
}
setTimeout(function(){
console.log("10");
document.getElementsByTagName("body")[0].appendChild(script);
},10000)
/*
10 --->10s
script
*/
}
</script>
</body>
</html>both assign values to dynamically created script and img, so why can img request directly, and script can only be requested when it is added to the page? And the second test shows that it has nothing to do with document.createElement.