账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    动态创建script和动态创建的img赋值src时为什么不同。
    33
    0

    在动态创建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没关系啊。。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 野原の向日葵 普通会员 1楼

      在JavaScript中，<script>标签用于在网页中插入一个脚本，而<img>标签用于在网页中插入一个图像。

      当你在<script>标签中动态创建一个脚本或图像，你可以使用JavaScript的new关键字来创建一个新的对象。这个对象可以包含各种属性和方法，用于定义脚本或图像的行为。

      例如，以下代码会动态创建一个新的<script>标签，并将其内容设置为一个函数，该函数将使用window对象的prompt()函数来获取用户的输入：

      javascript new script(function() { var userInput = prompt("请输入一个字符串:"); console.log(userInput); });

      然后，你可以使用document.createElement("img")来创建一个新的<img>标签，并将其src属性设置为上面创建的脚本的函数地址：

      javascript document.createElement("img").src = script.toString();

      在这些例子中，script.toString()方法返回一个字符串，该字符串包含了脚本的属性和方法的引用。这个字符串可以被设置为src属性的值。

      如果你在<img>标签中动态创建一个图像，你可以使用new Image()函数来创建一个新的图像对象。这个对象可以包含各种属性和方法，用于设置图像的属性和方法。

      例如，以下代码会动态创建一个新的<img>标签，并将其src属性设置为上面创建的脚本的函数地址：

      javascript new Image().src = script.toString();

      然后，你可以使用document.createElement("img")来创建一个新的<img>标签，并将其src属性设置为上面创建的图像对象的src属性：

      javascript document.createElement("img").src = image.toString();

      注意，当你在<img>标签中动态创建一个图像时，src属性的值通常是由脚本或图像对象提供的。这是因为src属性是用来表示图像或脚本的地址的。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部