• 【随笔】js加载


     有时候,当发现js操作一个dom的时候,发现dom没有找到,这是由于html没有加载完就开始操作该dom的缘故,所以需要在html文档加载完后再加载js,于是我们可以这么做:

      js方法:window.onload

      当一个文档完全下载到浏览器中时,才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。

    window.onload=function(){ 
      alert("Hello");
    } 

      jqury方法:

      会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕。换句话说,当HMTL下载完成并解析为DOM树之后,代码就会执行。

    $(document).ready(function(){ 
        alert("Hello!"); 
    }); 

      或者可以简写成:

    $(function(){ 
        alert(userName); 
    }); 

      时候,当一个网站需要大量js文件的时候,将js文件直接全部在开始就加载进来肯定不合适,也很容易拖慢网站的正常浏览,所以,我们需要在操作中需要到什么js再动态加载js文件。

      于是我们这么做:

      现在有2个文件,一个html文件a.html,是需要导入的b.js文件,最后是a网页的js文件a.js。

      a.html:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5         <meta http-equiv="content-script-type" content="text/javascript">
     6         
     7         <title>测试</title>
     8         
     9         <script type="text/javascript" src="a.js"></script>
    10     </head>
    11     
    12     <body>
    13         <p>测试界面!</p>
    14     </body>
    15 </html>

      a.js:

    1 console.log("Hello!");

      这时候访问这个网页,将会看到输出:

      

      在b.js中,定义了一个变量m:

    1 m = "zhang!!!"

      现在,要把b.js通过a.js动态加载到a.html内,在a.js中输出m,于是我们使用方法document.write()将b.js给加载到a内:

      a.js:

    1 console.log("Hello!");
    2 document.write('<script type="text/javascript" src="b.js"></script>');
    3 console.log(m);

      这时候,访问a.html:

      

      出现一个错误,m找不到!难道是b.js没有加载进来?于是通过调试功能查看一下:

      

      发现b.js已经成功加载了,那么为什么没有找到m呢?

      于是去查了一下,原来document.write()方法是通过异步加载的,如果在调用m的时候,b.js还没有加载进来,那必然就无法找到m了。

      于是我去找一个能够同步加载的办法,这样就让我找到了jquery的一个方法"$(document).append()":

      于是把a.js改为:

    1 console.log("Hello!");
    2 $(document).append("<script type='text/javascript' src='b.js'</script>"); 
    3 console.log(m);

      再访问a.html:

      

      m能够正常找到了,问题解决!!

      如此一来,我就可以在程序中通过调用方法,动态的在需要的时候加载需要的js,不必在开始加载html文档的时候就把所有js都加载进来了。

      jquery也有一种方法能够异步加载js文件:

        jquery.getScript()  

      通过 AJAX 请求来获得并运行一个 JavaScript 文件

    jQuery.getScript(url,success(response,status))

  • 相关阅读:
    windows10安装pycharm,以及pycharm教程和破解码
    windows 10安装python3和python2
    Git之仓库管理
    Python操作 Excel表格
    ansible 基础操作
    Flask-Migrate
    flask-script
    flask-sqlalchemy
    基于数字证书的二次登录认证流程
    摘录:识别系统原理(转)
  • 原文地址:https://www.cnblogs.com/linxiong945/p/4257235.html
Copyright © 2020-2023  润新知