故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

js,css异步加载

4241人阅读 2019/3/31 15:53 总访问:3842619 评论:2 收藏:0 手机
分类: 前端


有些时候为了效率,我们需要js与css能够异步加载


方法1:直接在后面加一个async的关键字

    <script src="~/lib/jquery/dist/jquery.js" async></script>

但是这样写html5后才开始支持


方法2:动态生成一个link或者script标签来实现异步加载

例如我们动态创建一个link标签来显示样式的异步加载

        $(function () {

            //异步延迟加载样式
            var link = $('<link />');
            link.attr('href', '/Content/font1.css');
            link.attr('rel', 'stylesheet');
            link.appendTo($('head'));
            link.load(function () {
                console.info('加载成功...');
            });

        });


动态加载Js

(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'http://www.xx.com/script.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);
     else
         window.addEventListener('load', async_load, false);
 })();


也可以动态创建一个iframe,iframe里边去请求某个js

var iframe = document.createElement('iframe'); 
 document.body.appendChild(iframe); 
 var doc = iframe.contentWindow.document; 
 doc.open().write('<body onload="insertJS()">'); 
 doc.close();


其实这种动态加载iframe的方式也可以实现一个iframe预加载,这样可以提高iframe加载的速度






欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价