剑轩

应无所住,而生其心

博主信息

排名

文章

860

粉丝

112

163

文章类别

CSS 16篇

微服务 41篇

Git 15篇

.NET 106篇

移动开发 33篇

软件架构 26篇

.NET Core 120篇

.NET MVC 11篇

英语 3篇

随笔 106篇

Bootstrap 3篇

Redis 21篇

编辑器 10篇

Js相关 15篇

虚拟化 8篇

js,css异步加载

5302人阅读 2019/3/31 15:53 总访问：5182653 评论：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加载的速度

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈net core常用依赖下载

👉net core项目发布到iis

评价

饰心

2019/4/8 13:42:19

牛逼，正好用到

剑轩:@饰心握手握手~

2019/4/9 20:59:24 回复