极客观点
项目管理
HarmonyOS
在动态创建script和动态创建img的过程中，为什么img赋值src之后能立即请求资源，而script必须添加到页面中才能加载资源
<!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>都是给动态创建的script和img赋值，为什么img就能直接请求，script是添加到页面才会请求？并且第二个测试说明和document.createElement没关系啊。。
我的理解是，图片本身就是一个元素，你直接访问图片的地址时，是可以展示这个图片的，不需要依赖页面。
但是js不一样，js必须依赖浏览器页面这样一个执行环境，才能执行，你浏览器直接访问一个js，得到的其实只是一堆字符串而已。
img和script本身就是不一样的。所以浏览器才会有这种特性：img就能直接请求，script是添加到页面才会请求。自己的理解，不一定对。