JS页面渲染完成之后,加载页面

JS页面渲染完成之后,加载页面


前言

要完成页面渲染完成之后取值,由于有些时候,页面渲染完成之后,有些js没有加载完成,如果要页面渲染完成之后,就要实现子页面向主页面的取值,并且调用相应的接口,会出现取不到值的情况。


提示:以下是本篇文章正文内容,下面案例可供参考

一、使用setTimeout方法

因为js的执行为单线程执行,所以即使setTimeout的执行为0ms,依然是页面渲染完成,并且在其上面的所有js都加载完成之后,才会加载当前页面的js,所以提供的一个解决方案为:使用setTimeout实现页面渲染完成之后的取值。

二、使用步骤

代码如下(示例):


<script type="text/javascript">
setTimeout(function(){//开启一个计时器,在这里面写所有页面渲染完成之后,要执行的代码
	var xxxxx = window.xxxxx;//从页面中取值,这个值是由主页面传入过来的
	$.ajax({
		type:"get",    //请求方式
		url:"/appFun?funId=xxxx&xxxxx="+xxxxx,
		dataType:"json",
		success: function(data) {
			
		},
		error: function(e) {
			console.log("ERROR: ", e);
		}
	});
}, 0);
</script>

总结

提示:这里对文章进行总结:
这个只是提供了页面渲染完成之后的一个新的方法,当使用$(function(){})、window.onload = function(){}等方法都无法实现想要的效果的时候,可以试试该方法。

为了确保 CSS 和 JS页面渲染完成后再加载,可以采用以下方法: 1. **使用 `DOMContentLoaded` 事件**: 在 `window.onload` 或 `document.addEventListener('DOMContentLoaded')` 事件中加载资源。这将在文档结构解析完毕之后触发,此时DOM已经准备就绪,所以CSS和JS会生效: ```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、付费专栏及课程。

余额充值