热搜:

JS兼容所有浏览器的DOMContentLoaded事件

2018-01-14 15:39:08文章来源:点点软件园热度:0

更多

  使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会触发此事件,尤其是如果图片量很大的情况下,会严重客户体验。所以很多时候,只需要DOM结构加载完毕即可,jQuery的$(document).ready(function(){})实现此功能,下面介绍一下原生JavaScript如何实现此功能。更多最新IT资讯尽在金顺软件园http://www.jinshun168.com/

  实现过程介绍:

  标准浏览器中,使用DOMContentLoaded事件即可实现我们的要求,注册事件处理函数也极为简单。

  代码如下:

2.jpg

  但IE8和IE8以下浏览器并不支持DOMContentLoaded事件,所以还需要另辟蹊径来解决此问题。

  可能很多朋友认为根据document.onreadystatechange事件的document.readyState状态是否等于complete来判断dom结构是否加载完毕,但经过测试并不能完成任务,如果页面使用iframe引入子页面,会有问题。

  解决方案如下:

  低版本IE浏览器特有的doScroll方法,当dom结构没有加载完成时,调用此方法会报错,于是可以通过定时器函数不断的调用此方法,并结合try catch语句来实现判断功能,代码如下:

4.jpg

5.jpg

  代码实现了兼容所有浏览器的DOMContentLoaded效果,下面介绍一下它的实现过程。

    金顺软件园小编推荐:


    使用JS获取SessionStorage的值


    js 索引下标之li集合绑定点击事件

以上,就是金顺软件园小编给大家带来的JS兼容所有浏览器的DOMContentLoaded事件全部内容,希望对大家有所帮助!

上一篇ASP.NET Core中调整HTTP请求大小的几种方法详解下一篇韩国设计师公布纪梵希VR/AR眼镜概念图
编辑:董小姐
标签js