精华内容
下载资源
问答
  • 异步加载

    2019-07-15 18:57:31
    异步加载 异步基础知识: 回调函数Console:https://developer.mozilla.org/zh-CN/docs/Web/API/Console 纯小白科普 1.异步加载是什么?和同步加载有什么区别吗? 2.异步加载存在的意义是什么?为什么要采用异步加载...

    异步加载

    异步基础知识:

    回调函数Console:https://developer.mozilla.org/zh-CN/docs/Web/API/Console

    纯小白科普

    1.异步加载是什么?和同步加载有什么区别吗?

    2.异步加载存在的意义是什么?为什么要采用异步加载?

    3.异步加载和单线程有什么关系吗?

    4.什么时候要使用异步加载?

    5.异步加载有几种方式?

    1.异步加载

    异步加载又称为非阻塞加载,当浏览器在下载JS的同时,还会进行后续页面处理。

    同步加载,又称为阻塞加载,与异步加载的功能相反。当浏览器在下载JS时,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像,渲染,代码执行等。

    2.为何要使用异步加载?

    异步加载可以优化脚本文件的加载,提高页面的加载速度。

    3.异步和单线程的关系?

    JS是一个单线程的语言,单线程就是一次只能干一件事,如果想让它同时干两件,不好意思,做不到,后面的事件请排队。

    显然,只使用单线程这样的机制很容易会出现卡顿的情况。

    为了防止卡顿,人们设计了一种方案解决了JS的单线程问题,使得JS具备了异步的属性。首先,浏览器分配一个主线程给JS用来执行任务(函数),但是一次只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让这些任务都和其他任务一样老老实实的排队等待执行的话,它们的执行效率是会很低的,严重的话甚至会导致页面的假死。所以,浏览器为了这些耗时的任务开辟了另外的线程,那里面主要包括http请求线程,浏览器定时触发器,浏览器事件触发线程这三个任务

    4.什么时候要使用异步加载?

    1.定时任务:setTimeout,setInterval

    2.网络请求:ajax请求,动态加载

    3.事件绑定

    1个点击事件被绑定了之后,我们是不知道浏览者什么时候会点击这个按钮的,如果浏览者一直不点击按钮,难道就不给他看页面接下来的动作了吗?显然不可能,所以要之后的事情和绑定事件同时做,如果浏览者点击了,那就按点击之后的动作往下走,如果真的没点击,那他也不会因为过程被阻塞而导致看不到其他的画面。

    5.异步加载有几种方式?

    异步加载常见的三种方式:

    https://blog.csdn.net/qq_17550381/article/details/80925793

    以上均为本人学习过程的总结,如有错误,欢迎指正!

    展开全文
  • 图片异步加载

    2017-11-09 18:01:47
    图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载
  • 异步加载图片

    2016-08-15 23:43:12
    异步加载
            private void button1_OnClick(object sender, EventArgs e)
            {
                //模拟  
                String[] st = new String[13];
                for (int i = 0; i < 13; i++)
                {
                    //这里我用的是比较大的图片 桌面背景 用于测试 可以根据自己的实际情况来添加地址 可以是url等形式  
                    st[i] = @"D:/备份/桌面背景/" + i + ".jpg";
                }
    
                //为了节约时间 简洁代码 创建图片容器时没多做处理  
                for (int j = 0; j < st.Length; j++)
                {  //创建pictureBox  
                    PictureBox pi = new PictureBox();
                    pi.InitialImage = global::MainForm.Properties.Resources._36_1_;//等待时显示其他图片  
                    pi.Location = new System.Drawing.Point(22, 25);
                    pi.Name = "pictureBox" + j;
                    pi.Size = new System.Drawing.Size(200, 100);
                    pi.TabIndex = 0;
                    pi.TabStop = false;
                    pi.LoadCompleted += new System.ComponentModel.AsyncCompletedEventHandler(this.pictureBox1_LoadCompleted);
    
                    //图片异步加载完成后的处理事件  
                    pi.LoadCompleted += new AsyncCompletedEventHandler(pictureBox_LoadCompleted);
                    //图片加载时,显示等待光标  
                    pi.UseWaitCursor = true;
    
                    //采用异步加载方式  
                    pi.WaitOnLoad = false;
    
                    //开始异步加载  
                    pi.LoadAsync(st[j].ToString());
    
                    flowLayoutPanel1.Controls.Add(pi);
                }
    
            }
            //通用事件  
            private void pictureBox_LoadCompleted(object sender, AsyncCompletedEventArgs e)
            {
                //转换成PictureBox   
                PictureBox pi = (PictureBox)sender;
                //图片加载完成后,将光标恢复  
                pi.UseWaitCursor = false;
    
            }  

    展开全文
  • 异步加载js

    千次阅读 2019-03-30 20:05:24
    异步加载js的三种的方案:1. defer异步加载 。2. async 异步加载。3. 创建script,插入到DOM中,加载完毕后callBack 。4,封装一个函数兼容性的异步加载js文件并且可以按需执行该文件里面的函数


    首先铺垫一下浏览器的绘制页面过程:、

    1. 第一步,首先是建立一个dom树,它是解析所有的dom节点(深度遍历的方法),解析dom节点就是解析到哪个dom节点就把它挂到dom树上,像碰到<img src = "XXX"/>这样的还是只把img节点挂到dom树上,意思就是说dom树的构建完成就是所有dom节点的解析完毕,并不代表所有dom节点加载完毕(dom的解析完毕一定在dom加载完毕之前)。
    2. 第二步生成cssTree
    3. 第三步生成randertree

    因为js可以操作dom,所以当渲染树建立后,如果动态的操作了dom,机会导致页面重新渲染,叫做reflow重排(重构)
    dom节点的删除,添加。dom节点的宽高变化,位置变化,displaynone–>block,offsetwidth,offsetLeft等一系列都会导致重排。

    repaint重绘:js改变了节点 的css,会导致那一部分的重绘,这样影响比较小。

    异步加载js

    js加载的缺点

    js加载本身是属于同步加载的,加载js文件会阻塞文档,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。

    但是有些工具方法需要按需加载,有一些工具js文件它是不会改变页面的,用到再加
    载,不用不加载。

    javascript异步加载的三种的方案

    1. defer异步加载

    defer异步加载,但要等到dom文档全部解析完才会被执行,只有IE能用,也可以将代码写到内部。
    在这里插入图片描述在这里插入图片描述

    2. async 异步加载

    async 异步加载,加载完就执行,async 只能加载外部脚本,不能把js写在script标签里。
    asychronous javscript and xml---->ajax的缩写

    ( 1和2执行时不阻塞页面,但是兼容性不好)

    3. 创建script,插入到DOM中,加载完毕后callBack
    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";//到了这一步之后就会异步的去下载demo.js文件
    
    
           document.head.appendChild(script);//当把标签插入到页面的时候才会去执行这个js脚本
    
     </script>
    

    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";//到了这一步之后就会异步的去下载demo.js文件
    
           document.head.appendChild(script);//当把标签插入到页面的时候才会去执行这个js脚本
           test();//Uncaught ReferenceError: test is not defined
      //为什么当前执行不了,因为文件还没有下载完,读程序是以微秒计的。有可能异步的下载demo.js文件还没有下载完,程序就读到test执行这了,还没有下载完demo.js,当然没有test函数了      
      
        </script>
    
    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";//到了这一步之后就会异步的去下载demo.js文件
    
           document.head.appendChild(script);//当把标签插入到页面的时候才会去执行这个js脚本
           setTimeout(function () {
                test();
            }, 1000)
     //这样就可以执行test函数了。等一段时间,等demo.js文件下载完毕了,再执行。
      </script>     
    

    但是我们怎么知道它什么时候异步的把外部js文件下载完呢???
    这个时候就要有一个信号来提示我们外部js文件异步下载完毕,你可以用了。

    1. load事件监听:Safari,chrome,firefox,opera都可以用这个来监听什么时候这个文件异步下载完毕
    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";
           script.onload = function(){
                 test();//当文件下载完之后就会执行onload方法,这样就知道什么时候demo.js加载完了。
           }
           document.head.appendChild(script);
        </script>
    
    1. IE 就用状态码的改变来知道什么时候完成文件的下载
    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";
    	   script.onreadystatechange = function(){
               if(script.readyState == "complete" || script.readyState == "loaded"){
                   test();
               }
           }
    	   document.head.appendChild(script);
        </script>
    
    
    1. 综合1和2,实现所有浏览器兼容
    <script>
           var script = document.createElement('script');
           script.type = "text/javascript";
           script.src = "demo.js";//到了这一步之后就会异步的去下载demo.js文件
           
           if(script.readyState){
                script.onreadystatechange = function(){
                if(script.readyState == "complete" || script.readyState == "loaded"){
                    test();
                }
             }
           }else{
                script.onload = function(){
                    test();
                }
           }
       
           document.head.appendChild(script);
          
        
        </script>
    
    1. 封装一个函数兼容性的异步加载js文件并且可以按需执行该文件里面的函数
      第一版:
    <script>
    //callback名字叫做回调函数,在事件里面的绑定的事件处理函数就是回调函数,回调函数其实就是当满足一定条件才调用的函数。
           function loadScript (url, callback){
               // url是异步下载的js文件
               //callback是异步下载的js文件中的某一个函数
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.src = url;//异步下载的js文件
            if(script.readyState){
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readyState == "loaded"){
                        callback();
                    }
               }
            }else{
                script.onload = function(){
                    callback();
                }
            }
            
            document.head.appendChild(script);
           }
    </script>
    第一版有一个缺陷就是在IE上如果下载太快(比读程序还快),IE的readystatechange 事件检测状态码的时候,它早已经从loading变成complete或者loaded(以极快的速度加载完了文件,你还没来得及检测),
    那你再检测它就不会变了,它一直都是complete或者loaded,这个时候就是马后炮了,检测也没用了。
    

    第二版(完美版):

    
    <script>
    function loadScript (url, callback){
               // url是异步下载的js文件
               //callback是异步下载的js文件中的某一个函数
            var script = document.createElement('script');
            script.type = "text/javascript";
      
            if(script.readyState){
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readyState == "loaded"){
                        callback();
                    }
               }
            }else{
                script.onload = function(){
                    callback();
                }
            }
            script.src = url;//开始异步下载的js文件
            document.head.appendChild(script);
           }
    </script>
    第二版就是先绑定事件,然后再script.src = url开始异步下载js文件,那么这个时候下载,肯定有一个状态码的转换,这样就解决了第一版还来不及检测状态码的尴尬。    
    

    封装函数的用法完善(截图中省略了loadScript,它就是上面的完整版):
    在这里插入图片描述第一种解决办法:
    在这里插入图片描述
    第二种解决办法(当要异步加载的js文件里面的函数构造是以这种命名空间的形式):
    在这里插入图片描述

    <script>
    function loadScript (url, callback){
         // url是异步下载的js文件
         //callback是异步下载的js文件中的某一个函数
    	  var script = document.createElement('script');
    	  script.type = "text/javascript";
    	 
    	  if(script.readyState){
    	      script.onreadystatechange = function(){
    	          if(script.readyState == "complete" || script.readyState == "loaded"){
    	              tools[callback]();
    	          }
    	     }
    	  }else{
    	      script.onload = function(){
    	          tools[callback]();
    	      }
    	  }
    	  script.src = url;
    	  document.head.appendChild(script);
     }
     
       loadScript('demo.js', "test");
       //传进去一个字符串,然后 tools[callback]();里面的tools[callback]拿到的就是test函数体,后面带上执行符号()执行就可以了。
       </script>
    
    展开全文
  • 这是博文《异步加载图片(一)》对应的源码,这段代码仅实现了异步加载,对于滑动时暂停,停划时加载的问题会在《异步加载图片(二)》中讲解,这篇文章的地址:...
  • async异步加载 我发现了如果不是用ajax直接获取数据,async出现的问题太多了。 要注意的细节很多。 let setting = { async: { enable: true, type: "POST", contentType : 'application/x-...

    async异步加载

    我发现了如果不是用ajax直接获取数据,async出现的问题太多了。 要注意的细节很多。

     let setting = {
            async: {
                enable: true,
                type: "POST",
                contentType : 'application/x-www-form-urlencoded', //该方式如果后台请求有无 可以根据实际情况修改
                dataType:"json",
                url: "/category/api/getListByCodeAndId",
                // autoParam:["code","name","parentCode"],
                otherParam:{code:function () {return  $("input[name='code']").val()},id:_id}, 
                //该处用于ajax请求参数设置,但是如果是需要多次的时候并没有什么效果。。
                dataFilter:  ajaxDataFilter
            },
            check: {
                enable: true,
                chkboxType: {"Y": "s", "N": "s"}
            },
            view: {
                autoCancelSelected: true,//点击节点时,按下Ctrl或Cmd键是否允许取消选择操作
                dblClickExpand: true,//双击节点时,是否自动展开父节点的标识
                expandSpeed: "fast",//节点展开关闭的时候的速度
                selectedMulti: true,//允许是否同时选中多个节点
                showIcon: false,//设置是否显示节点的图标
                showLine: true,//是否显示节点之间的连线
                txtSelectedEnable: false//设置zTree是否允许可以选择zTree DOM内的文本
            },
            data: {
                simpleData: {
                    enable: true, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
                    idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                    pidKey: "pid" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
    
                }
            }
            ,edit:{
                enable: true
            }
            ,callback:{
                onAsyncSuccess: zTreeOnAsyncSuccess,
                onAsyncError: zTreeOnAsyncError
            }
        }
        // ajax(数据处理)
        function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            layer.alert(XMLHttpRequest);
            return false
        };
        function ajaxDataFilter(treeId, parentNode, responseData) {
            //处理数据这边有个大坑。 如果设置isParent的话,其中一项没有子节点的isParent要设置成false,否则只要点击+展开, 就会一直加载ajax无限添加列表。不过ztree很聪明了, 只要给id 和 pid自己便会区分
            if(responseData.code==200){
                var newData=[];
                var res = responseData.data;
                $.each(res, function (index, value) {
                    newData.push({
                        name: value.name,
                        id: value.code,
                        pId: value.parentCode
                    })
                });
                console.log(newData)
                return newData;
            }else{
                layer.alert(responseData.message);
                return false
            }
        }
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) { // ajax异步请求成功;
        };
        //ztree 实例化
        var backperTree = $.fn.zTree.init($("#backPermissionTree"), setting);
    

    以上需要注意的几个点:

    1. 对ajax返回的数据处理时, 如果设置isParent的话,其中一项没有子节点的isParent要设置成false,否则只要点击+展开, 就会一直加载ajax无限添加列表。不过ztree很聪明了, 只要给id 和 pid自己便会区分, 只要注释掉isParent便无此问题。
    2. 注意contentType后台的数据接收方式,因为这个问题,前期浪费了很多时间。
    3. otherParam尝试了很多种方法,但是个人尝试了一下动态生成的数据并没有这么可靠。所以 setting之后我进行了重新定义,在后面代码中有提现。

    本次功能需要是需要根据分类的选择联动加载树状结构,实现多选功能。
    在这里插入图片描述
    那么在改变分类的时候就需要修改ajax传参问题, 对setting的局部数据进行了修改:

    无效代码:

    		setting.async.otherParam={code:data.value,id:_id}  //对ajax请求参数进行修改
    		var treeObj = $.fn.zTree.getZTreeObj("backPermissionTree");
    		treeObj.reAsyncChildNodes(null, "refresh");
    

    代码有个问题,虽然setting的参数被改变了 但是reAsyncChildNodes中的setting并不会有所改变,请求的参数还是保持不变。

    正确代码

    		setting.async.otherParam={code:data.value,id:_id};
            $.fn.zTree.init($("#backPermissionTree"), setting);
    

    ztree回显选中结果

    在这里插入图片描述

    	 var treeObj = $.fn.zTree.getZTreeObj("backPermissionTree");
    	 var nodes = treeObj.getCheckedNodes(true); //返回选中结果数组
    	 $(".item-list").empty();
    	 $.each(nodes,function (index, val) {
    	     $(".item-list").append("<span>"+val.name+"</span>");
    	 })
    

    html代码

    		<div class="layui-form-item col-lg-7 col-md-8 col-sm-9 col-xs-12">
               <label class="layui-form-label title">关联分类:</label>
               <div class="id-list input-box">
                   <div class="resBox">
                       <div class="item-list"></div>
                       <ul id="backPermissionTree" class="ztree"></ul>
                   </div>
                   <button id="change" class="changeBtn">更改</button>
               </div>
           </div>
    

    后台回显

    如果在第一次初始化ztree,紧跟着进行勾选 或 取消勾选 的节点数据,会因为时间误差而无法成功操作。可以给一个时间延迟

        var treeObj = $.fn.zTree.getZTreeObj("backPermissionTree");
        setTimeout(function () {
            if(modelCategoryGroupDTO.groupList && modelCategoryGroupDTO.groupList.length > 0){
                $.each(modelCategoryGroupDTO.groupList, function (index, val) {
                    var node = treeObj.getNodeByParam("id", val.code);
                    if (node) {
                        treeObj.checkNode(node, true, false);
                    }
                })
            }
        },1000)
    

    如果不给延迟, node一直为null, 给一个延迟就可以解决这个问题啦!!

    一个很强大的tree功能了, 希望对您有帮助。

    展开全文
  • js异步加载

    2019-07-08 21:33:44
    异步加载JS javascript异步加载的三种方案: 1.defer异步加载,但要等到dom文档全部解析完才会被执行。只有ie能用,也可以将代码写到内部。 2.async 异步加载,加载完成就执行,async只能加载外部脚步,不能把js写...
  • 首先,我得解释一下为什么我的标题取消异步加载打引号,这是因为可能最后实现效果并不是你自己想象中的那样。大家看取消异步加载,这不是很简单吗?AsyncTask中不是有一个cancel方法吗?直接调用该方法不就行了吗?...
  • JavaScript异步加载

    2018-07-19 14:50:27
    javascript 异步加载的三种方案 1. defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用。 2. async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。 (不兼容IE9以下...
  • javaScript 异步加载

    2018-07-16 20:17:55
    在html页面中当我们需要加载一些资源的时候,例如... defer 异步加载,在script标签上加上这个属性, 它既可以异步加载外部脚本,也就是src引入的,也可以加载内部代码,也就是script内部写的代码, 但它要等到d...
  • 异步加载JS

    2018-10-26 17:37:15
    js的加载缺点:加载工具方法没必要阻塞文档,过多的js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。...2.async 异步加载,加载完就执行,async只能加载外部脚本,不能把js...
  • 异步加载与请求

    2021-01-17 12:07:16
    异步加载与请求: 文章目录异步加载与请求:背景:异步加载JSON介绍与应用异步GET与POST请求 背景: 随着技术的不断进步,现在不少网站已经引入了异步加载技术,单击新的链接以后,几乎看不到“白屏”的现象了。而且...
  • 异步加载:当场景很大的时候 优点:不会阻塞主线程,不会出现卡顿 缺点:加载时间会很长 异步累加加载:当场景很大的时候,我们选择先加载主要的,比如地形和房屋,花花草草等可以后面再逐步加载,实现分布式加载...
  • Unity异步加载场景与加载进度条

    万次阅读 多人点赞 2017-05-20 17:40:46
    异步加载场景分为A、B、C三个场景 A场景是开始场景;B场景是加载场景(进度条加载显示);C场景是目标场景 在A场景中添加一个按钮,触发函数: //异步加载新场景 public void LoadNewScene() { //保存需要加载的...
  • 异步加载爬取思路

    2019-11-24 11:31:09
    以前一直对于异步加载不太熟悉,近期需要爬取一个异步加载都网页,弄了很长时间都没有收获,只能去了解一下异步加载的过程。 异步加载的理解: 异步加载是在网页本身不发生改变的情况下,增加数据,比如很多网页通过...
  • android异步加载图片源码

    热门讨论 2011-09-17 08:43:59
    android异步加载图片源码 android异步加载 android异步加载图片源码
  • ListView异步加载图片

    2015-10-28 11:35:41
    ①ListView异步加载图片的方式 ②给ImageView设置Tag,解决图片覆盖问题 ③采用LruCache缓存已经加载过的图片 ④当ListView滚动时不加载图片,滚动停止时才加载图片,从而达到ListView滑动很流畅的效果 ⑤当...
  • zTree异步加载Demo

    热门讨论 2014-10-20 15:20:24
    用springMVC和mysql,实现了一个简单的zTree异步加载例子,希望可以帮到更多的人。。。
  • java zTree异步加载实战

    万次阅读 2017-11-19 13:02:03
    ztree异步加载
  • 异步加载伪代码

    2018-01-16 10:22:33
    第一,异步加载场景,需要开启协程函数 第二,获取异步进度条的状态值 异步加载的进度: 第三,同步进度条和异步加载进度
  • 同步加载、异步加载、延迟加载 一、同步加载  平常默认用的都是同步加载。如:http://yourdomain.com/script.js">   同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像...
  • 异步加载
  • 爬取异步加载的网页

    千次阅读 2019-07-28 02:55:35
    爬取异步加载的网页什么是异步加载如何爬取异步加载的网页 什么是异步加载 通俗地说就是你打开网页有数据,但是查看源文件没有数据 比如下图: 关于异步加载,可以参考:...
  • zTree 异步加载

    千次阅读 2016-03-16 13:11:02
    前几天一直在研究zTree 怎么实现异步加载,看了很多文章头也是蒙蒙的,现在自己来总结一下,在这里先解释一下所谓的异步加载异步加载就是数据没有一次性全部加载出来,当用户点击父节点上的“+”号的时候zTree会...
  • Js文件异步加载

    2020-06-07 10:06:02
    Js文件异步加载 浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到<script>标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会...
  • unity的异步加载

    千次阅读 2019-08-02 20:54:07
    加载场景分为同步加载和异步加载,同步加载就是直接跳转,遇到电脑配置差或者要跳转的场景大,很容易卡; 异步加载场景正好解决了卡帧的问题 对于一般的场景,要进行异步加载的话,会使用到两个场景...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,744
精华内容 13,097
关键字:

异步加载