如何在Javascript中首先附加子负载

How to append child load first in Javascript?

本文关键字：负载 Javascript      更新时间：2023-09-26

我想在<head>标记的第一个位置动态添加js文件。我的文件在下面

示例链接：链接

代码

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
        function load() {
        var doc = document;
        var url = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
        var id =  1;
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = id;
        //alert(script);
        var head = doc.getElementsByTagName( "head" )[ 0 ].appendChild( script );
        }
         window.onload = load;
        </script>   
<title>Nathan</title>
<style>
table{
    width:200px;
    margin:0 auto;
    background-color:#eee;
    text-align:center;
    cursor:pointer;
}
th{
    background-color:#333;
    color:#FFF;
}
div#lyrics{
    width:200px;
    height:400px;
    background-color:#7C8698;
    position:absolute;
    left:500px;
    padding:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("div#lyrics").hide();
    $("#songlist tr").mouseover(function(){
        $(this).css("background-color","#ccc");
        $("#lyrics",this).show();
    }).mouseout(function(){
        $(this).css("background-color","#eee");
        $("#lyrics",this).hide();
    });
});
</script>
</head>
<body>
    <table id="songlist">
        <th>Songs</th>
        <tr><td>song1<div id="lyrics">la la la song1</div></td></tr>
        <tr><td>song2<div id="lyrics">doo doo doo song2</div></td></tr>
        <tr><td>song3<div id="lyrics">fee fi fo fum song3</div></td></tr>
        <tr><td>song4<div id="lyrics">hmm hmmm song 4</div></td></tr>
        <tr><td>song5<div id="lyrics">ma ma mi mi song5</div></td></tr>
        </tr>
    </table>
</body>
</html>

动态脚本添加成功，但添加了head标记的最后一个。所以我的jquery函数不起作用。所以请告诉我如何在头中第一个标签

上加载我的动态脚本

在head部分首先添加jQuery仍然不起作用，因为对源文件的请求将是异步的，为什么不像普通的脚本标记一样添加jQuery：

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script>/*jQuery dependent code*/</script>
  ...

如果你将/必须使用异步加载，你将不得不等待脚本加载，然后再添加任何依赖jQuery的代码：

<script> // Pseudo code: (Take a look at http://www.ejeliot.com/blog/109 for more complex solution)
  var script = document.createElement('script');
  script.onload = init;
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js';
  document.body.appendChild(script);
</script>
<script>
  function init() { /* now jQuery is loaded */ }
</script>

使用.insertBefore()和.firstChild而不是.appendChild()

在编写代码时，第二个脚本标记中的内容将在加载jQuery之前运行。当时没有定义"$"。

window.onload = load;

意味着您将内容放入加载函数中，以便在"onload"下运行。但很明显，脚本标记中的内容已经在运行了。只有在已定义的脚本标记中的所有脚本都执行完毕后，才会执行定义的"加载"函数。

然后，当然，实际下载文件需要一些时间。

如果必须异步加载jQuery，还必须将所有依赖于jQuery的JavaScript放入某个回调中，该回调只有在成功加载jQuery后才能执行。

相关文章：