zoukankan      html  css  js  c++  java
  • javascript按需加载

    前言

    按需加载是性能优化的一部分.在网络环境不好,网速慢的时候,使用按需加载可以达到优化的目的

    按需加载通常用于原生js开发的项目

    实现

    思路

    1.判断url是否已经存在,如果存在不执行后续,不存在才会执行后续的按需加载

    2.获取标签head

    3.我们要实现< script src="xx.js" type="text/javascript"> 加载完成执行一个操作,具体实现方法:

    • 创建script标签,添加属性src和type.
    • script加载完毕后在ff浏览器中会执行onload事件(兼容ff浏览器)
    • script加载完毕后在ie中要实现立即执行某个事件需要onreadystatechange事件和this.readyState事件共同判断,this.readyState为loaded或者是complete都表明script已经加载完毕
    var obj ={};
    /**
       * 按需加载JS
       * @param {string} url 脚本地址
       * @param {function} callback  回调函数
       */
    export function dynamicLoadJs (url, callback) {
     if(obj[url]){
             callback();
             return;
           }
           obj[url]=true;
      var head = document.getElementsByTagName('head')[0]
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = url
      if (typeof (callback) === 'function') {
        script.onload = script.onreadystatechange = function () {
          if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
            callback()
            script.onload = script.onreadystatechange = null
          }
        }
      }
      head.appendChild(script)
    }
  • 相关阅读:
    《天才在左,疯子在右》
    MVC思想概述
    java文件读写
    HTTP协议简单笔记
    自学Python_Day01
    Linux基础介绍篇
    PHP学习 Day_01
    Linux中部分命令英语全拼
    Linux学习基础命令(三)
    Linux学习基础命令(二)
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/13050027.html
Copyright © 2011-2022 走看看