页面渲染后再加载css、js

 <script>
    function addScriptTag(src){
	    var script = document.createElement('script');
	    script.setAttribute("type","text/javascript");
	    script.src = src;
	    document.body.appendChild(script);
    }
     function addLinkTag(href){
	    var link = document.createElement('link');
	    link.setAttribute("rel","stylesheet");
	    link.href = href;
	    document.body.appendChild(link);
    }
    window.onload = function(){
      addLinkTag("/static/Cesium/Widgets/widgets.css")
    	addScriptTag("/static/Cesium/Cesium.js");
      addScriptTag("/static/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude.js");
      addScriptTag("/static/video/jsencrypt.min.js");
      addScriptTag("/static/video/jsWebControl-1.0.0.min.js");
      addScriptTag("/Vtour/sxly/xinanjiang/tour.js");
    }
    </script>
为了确保 CSSJS页面渲染完成后再加载,可以采用以下方法: 1. **使用 `DOMContentLoaded` 事件**: 在 `window.onload` 或 `document.addEventListener('DOMContentLoaded')` 事件中加载资源。这将在文档结构解析完毕之后触发,此时DOM已经准备就绪,所以CSSJS会生效: ```javascript document.addEventListener('DOMContentLoaded', function() { var cssLink = document.createElement('link'); cssLink.rel = 'stylesheet'; cssLink.href = 'styles.css'; document.head.appendChild(cssLink); var jsFile = document.createElement('script'); jsFile.src = 'script.js'; document.head.appendChild(jsFile); }); ``` 2. **使用 `async` 和 `defer` 属性**: 对于外部 JavaScript 文件,使用 `async` 使得它不会阻止页面其他部分的渲染,而 `defer` 则保证它会在页面解析完成后、DOMContentLoaded 之前执行。在 `<script>` 标签中指定这两个属性即可: ```html <script async src="script.js"></script> <!-- 或 --> <script defer src="script.js"></script> ``` 3. **使用 Modernizr 的 `loadCSS` 插件**: Modernizr 提供了一个名为 `loadCSS` 的模块,允许你在 DOMContentLoaded 之后异步加载 CSS 文件,避免了传统 `<link>` 元素可能导致的潜在问题。 4. **异步加载库工具**: 还有一些库,如 RequireJS、Webpack 等,专门设计用于管理模块化应用的异步加载,它们通常能够更好地处理依赖和生命周期。 通过上述方法,可以保证资源在用户看到页面内容时才开始加载,提高用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值