LoadJS与myload实现

最新推荐文章于 2019-07-03 14:09:51 发布

cc百川

最新推荐文章于 2019-07-03 14:09:51 发布

阅读量2.9k

点赞数 1

分类专栏： web前端文章标签： loadjs 产品二次注入静态文件 dom对象onload 异步注入静态文件自定义loadjs

本文链接：https://blog.csdn.net/ljcc122/article/details/89249203

版权

LoadJS与myload实现

注意本次文章有点水
源码：链接： https://pan.baidu.com/s/1KgG1wvBqhOe4nJO70pgUVA
提取码：r31h

异步加载静态资源：
原本我的想法是使用定时器，或者es6语法中的async、generator或者promise对象实现。但是查看到有现成的js插件即可完成，因此就查看了相关代码进行实现。
常见用法：产品定制化开发需求需要，用户可能重写js中前端验证，或者css样式等

myload：自己编码实现

//加载js
function myloadjs(url,callback){
    var script=document.createElement('script');
    script.type="text/javascript";
    script.src=url; 
    script.attr={"async":""};
    addcallback(callback, script, null); 
}
//加载css
function myloadcss(url , callback) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    var pathStripped = url.replace(/^(css|img)!/, '')
    link.href = pathStripped;  
    var isLegacyIECss = 'hideFocus' in link;  // tag IE9+
    if (isLegacyIECss && link.relList) {
        isLegacyIECss = 0;
        link.rel = 'preload';
        link.as = 'style';
    }
    addcallback(callback, link, null); 
}
//加载img
function myloadimg(url, id, callback) {
    var img = document.createElement('img'); 
    var pathStripped = url.replace(/^(css|img)!/, '')
    if (/(^img!|\.(png|gif|jpg|svg)$)/.test(url)) {
        img.src = pathStripped;
        img.style="width:100px";
    }
    addcallback(callback, img, id); 
}
//添加回调函数的函数
function addcallback(callback, tagter, id) {
	/*--------核心之一-----------*/
    tagter.onload = tagter.onerror = tagter.onbeforeload = function(){
        callback();
    }
   	/**-----------------------------**/
     if(id) {
        document.getElementById(id).appendChild(tagter);
    } else {
        document.getElementsByTagName('head')[0].appendChild(tagter);
    }
}
//日志信息
function println(msg) {
    console.log("myload日志系统======>"+msg)
}

使用：
文件目录在这里插入图片描述

<!DOCTYPE HTML lang="zh-CN">
<html>
    <head>
        <meta charset="utf-8"/>
        <title>测试loadjs/myload</title>
        <script  type="text/javascript" src="../js/myload.js"></script>
        <script type="text/javascript" src="../js/loadjs.js"></script>
    </head>
    <body>
        <div style="text-align:center;">测试loadjs/myload</div>
        <div id="test">sdf</

最低0.47元/天解锁文章

cc百川

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
LoadJS与myload实现

LoadJS与myload实现异步加载静态资源：原本我的想法是使用定时器，或者es6语法中的async、generator或者promise对象实现。但是查看到有现成的js插件即可完成，因此就查看了相关代码进行实现。常见用法：产品定制化开发需求需要，用户可能重写js中前端验证，或者css样式等myload：自己编码实现可点击链接获取源码
复制链接

扫一扫