`
alexcheng
  • 浏览: 181828 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML页面中DOM更新时机的奇怪问题

阅读更多

最近在开发中遇到一个奇怪的问题,这个问题的场景是比较简单的,在一个DOM节点中首先要显示的是一条“正在加载”的消息,然后从远程获取一些数据,并显示在此DOM中。在Firefox下面,“正在加载”的消息能够正常显示,之后从远程获取的数据也能正常显示出来;但是在IE和Safari上面,“正在加载”的消息不能显示出来,DOM节点的内容先是空白的,只有等远程的数据拿到之后,才有内容显示出来。

 

后来进过分析,认为可能的原因是获取远程数据时包含了同步调用,导致DOM节点的内容通过innerHTML设置“正在加载”这条消息的时候并没有更新显示。不过只有Firefox上面正常,也觉得挺奇怪的。

 

解决的办法是通过window.setTimeout(func, 0)来把获取数据的方法人为的押后,这样让浏览器可以有机会去即时更新DOM,并显示“正在加载”的消息。这样一修改之后,在Firefox,IE和Safari上面都没有问题了。

 

 

分享到:
评论

相关推荐

    解决vue页面DOM操作不生效的问题

    在Vue框架中,页面动态更新是非常常见的需求,但有时候开发者可能会遇到在页面上进行DOM操作不生效的问题。这种情况通常发生在某些数据更新之后,但直接进行DOM操作时,并没有取得预期效果。Vue使用的是虚拟DOM...

    simple_html_dom,php下的html文件DOM解析库

    在PHP开发中,处理HTML文档是一项常见的任务,尤其是在进行网页抓取或网页内容分析时。PHP Simple HTML DOM Parser是一个轻量级且易于使用的库,它允许开发者像操作DOM对象一样方便地处理HTML文档,同时也支持jQuery...

    PHP Simple HTML DOM Parser 中文手册

    simple_html_dom中文解析手册

    c++ html dom 树

    每个节点代表HTML中的一个元素,如`<html>`, `<head>`, `<body>`等,甚至包括文本节点和注释。这种树形结构便于程序遍历、查找、修改或删除HTML元素。 `DomTree.cpp`和`DomTree.h`是实现这个功能的关键文件。`.cpp`...

    HtmlDom.rar_HTML dom_PHP HTMLdom

    HTML DOM(Document Object Model)是HTML和XML文档的树型结构表示,它为网页提供了一种标准的编程接口,使得开发者可以通过JavaScript或PHP等语言来操作网页中的元素,实现动态更新、添加、删除以及修改页面内容。...

    DOM基础及DOM操作HTML

    AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,极大地提升了用户体验。在这个过程中,DOM操作是关键,因为它用来定位和更新需要更新的HTML部分。 NetBeans是一个跨平台的集成开发环境...

    谷歌获取网页dom的插件

    1. 实时DOM查看:提供一个界面,让用户在浏览器中直观地看到当前网页的DOM结构。 2. 元素选择器:支持CSS选择器或者其他方式快速定位到目标元素。 3. 属性检查:显示选定元素的所有属性,包括ID、class、样式、事件...

    C#获取HTML源码及生成DOM树

    总的来说,"C#获取HTML源码及生成DOM树"涉及的关键技术包括:使用`HttpClient`进行网络请求,`HtmlAgilityPack`库解析HTML并构建DOM,以及通过DOM树进行网页元素的查找和操作。这些技能对于开发爬虫、自动化测试、...

    HTML DOM 参考手册 电子书

    DOM允许编程者和脚本语言(如JavaScript)来动态更新、添加、删除以及改变任何元素和属性,使网页与用户交互变得更加灵活和强大。 《HTML DOM参考手册》是一本非常实用的资源,它详细介绍了如何通过DOM API操作HTML...

    HTML DOM基础教程(网页形式)

    HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM ...

    根据DOM将html转为canvas图片格式

    在现代Web开发中,将HTML页面转换为图像格式的需求时常出现,例如为了屏幕截图、保存网页快照或者在不支持HTML的环境中展示内容。这里我们关注的是如何利用DOM(Document Object Model)和Canvas API将HTML内容转化...

    HTML DOM 参考手册

    这个“HTML DOM 参考手册”中的汉化版确保了国内开发者可以更方便地理解和应用DOM技术,无论是在创建动态网页、实现交互效果,还是在进行自动化测试和网页爬虫等方面,DOM都是不可或缺的知识基础。通过深入学习DOM,...

    html2canvas实现将dom生成图片并保存至本地

    通过以上介绍,我们可以了解到html2canvas是如何帮助我们在浏览器端实现DOM到图片的转换,以及如何在实际项目中运用这个库来生成和保存网页截图。虽然它有一些限制,但在许多场景下,如用户自定义分享内容、生成预览...

    domtoimage使用HTML5canvas从DOM节点生成图像

    综上所述,domtoimage库是JavaScript开发中一个强大的工具,它结合了DOM和HTML5 Canvas的功能,使得开发者能够方便地从网页中创建和分享图像。了解并掌握这些相关知识点对于提升Web开发能力,特别是前端交互设计,是...

    手工HTML代码转换为DOM代码

    在JavaScript编程中,DOM(Document Object Model)是HTML和XML文档的一种结构化表示,它将网页内容抽象成一系列节点,允许我们通过JavaScript来操作这些节点,实现动态网页的效果。本篇我们将深入探讨如何将手工...

    前端开源库-htmldom

    《前端开源库——htmldom:Node.js中的HTML处理利器》 在当今互联网技术日新月异的时代,前端开发人员面临着各种挑战,其中一项便是如何有效地处理和操作HTML文档。在此背景下,`htmldom`应运而生,它是一个专门为...

    simple html dom php

    PHP(Hypertext Preprocessor)是一种开源的服务器端脚本语言,特别适合于Web开发,可嵌入到HTML中使用。PHP能够处理表单数据、生成动态网页内容、访问数据库等,为网页数据采集提供基础支持。 2. **HTML DOM解析*...

    html dom修改代码

    HTML DOM(Document Object Model)是HTML和XML文档的编程接口,它将网页结构表示为一个树形结构,允许程序员和脚本动态更新、添加、删除和改变任何元素或属性。在处理HTML时,DOM提供了标准的方法来访问和操作页面...

Global site tag (gtag.js) - Google Analytics