JavaScript asynchronous innerHTML usage analysis_javascript skills

Of course, this time-sharing loading technology is only an auxiliary technology and does not have the ability to add nodes. Nowadays, another more peculiar technology Asynchronous innerHTML has been developed again. I cannot help but praise that foreigners are very advanced in research in this area.

Copy code The code is as follows:

function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//The content to be added is placed here first.
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//Then move to the document fragment little by little
setTimeout(arguments.callee, 0) ;//Use asynchronous calls to piece together document fragments by yourself until the div nodes are emptied
} else {
callback(frag);//This is where the actual operation of inserting nodes is performed
}
})();
}

Advantages of this technology:
1. Use closures to solve the memory overflow problem of IE6
2. Use setTimeout(fn,0) The hack drags the operation out of the queue to prevent the browser from suspended animation
3. Use Document Fragment to reduce the number of renderings of the page
4. The callback node can be inserted using the DOM standard method (appendChild) (such as IE's table , innerHTML of tbody, tr, td and other tags are read-only)
Usage:

Copy code The code is as follows:

var htmlStr = '

...

...

. ..

';
asyncInnerHTML(htmlStr, function(fragment){
// You can treat 'fragment' as a regular node.
document.body.appendChild(fragment);
});

However, this method does not work in every browser when adding nodes to the table, and it has to be said that it is a big failure. It has been tested that IE8, IE6, and FF3.5 have rendering errors, but chrome, safari4, opera10, etc. can render the table perfectly. It is estimated that node loss occurs when IE8 and others transfer nodes to document fragments.

<style> .filament_table { border-collapse:collapse !important; border-top:1px solid #A9EA00; border-left:1px solid #C1DAD7; table-layout:fixed; width:400px; } .filament_table thead th { background:#A9EA00; color:#FCDE6A; border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; padding:2px 5px; } .filament_table tbody td,.filament_table tbody th { border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; padding:2px 5px; color:#76C2C3; } .filament_table tfoot td { border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; background:#A9EA00; color:#FCDE6A; font-size:12px; padding:0; } .filament_table tbody td a{ text-decoration:none; color:#76C2C3; } .filament_table tbody tr:nth-child(even) { background:#F7FBFF; } </style> <table class="filament_table"> <thead><tr><th colspan="3">异步的innerHTML</th></tr></thead> <tbody id="test"> </tbody> </table> <script type="text/javascript"> var getData = function(){ var builder = []; for(var i=0;i<10;i++){ builder.push("<tr><td>目录"); builder.push(i); builder.push("<td>商品"); builder.push(i); builder.push("<td>商品"); builder.push(i); builder.push(""); } return builder.join(''); } function asyncInnerHTML(HTML, callback) { var temp = document.createElement('div'), frag = document.createDocumentFragment(); temp.innerHTML = HTML;//要加入的内容先放到这里。 (function(){ if(temp.firstChild) { frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片 setTimeout(arguments.callee, 0);//然后把插入内容的操作作为异步调用放到一个独立的堆栈中 } else { callback(frag);//这里才是真正执行插入节点的操作 } })(); } addData = function(){ asyncInnerHTML(getData(),function(flag){ var tbody = document.getElementById("test"); tbody.appendChild(flag); }) } </script> <p><button type="button" onclick="addData()">开始</button></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。

在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！

相关演示可见无忧的贴子，发现这种方法不是最佳的插入动态内容的方法。

<style> #myTable{height:300px;overflow:auto;border:1px solid #39F;width:600px; } table,td,th{font-size:12px;border-collapse:collapse;height:100%;border:1px solid #39F; } tr.odd{background:#B1E4F3; } td.index{background:#B1E4F3;color:#000066;text-align:center; } </style> <div id="myTable"> <table cellspacing="0" cellpadding="2" id="tb"> <tr class="odd"> <td style="width: 51px" class="index">1</td> <td style="width: 121px">姓名1</td> <td style="width: 51px"><span style="color: #00f">男</span></td> <td style="width: 51px">20</td> <td style="width: 121px">1987-12-7</td> <td style="width: 201px">这个人很懒，什么都没有留下</td> </tr> </table> </div> <script> freeFor=function(i,to,fn){ (function(){ fn(i); i++<to?setTimeout(arguments.callee,30):0; })(); }; var T=document.getElementById("tb") ,R=T.rows[0] ,B=T.getElementsByTagName("tbody")[0]; freeFor(1,40,function(z){ var F = document.createDocumentFragment(); for (var i=1;i<50;++i ){ var Y=R.cloneNode(true); var I=Y.getElementsByTagName("TD")[0]; I.innerHTML=(i*z+1); I.className='index'; Y.className=i%2?'':'odd'; F.appendChild(Y); }; B.appendChild(F); F=null; }); </script>

Related labels：

javascript asynchronous

source：php.cn

Previous article：Summary of javascript keyboard events Recommended_javascript skills Next article：Experience in dealing with garbled characters in JavaScript_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}

From 2024-04-06 19:25:49

0

1

505

Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...

From 2024-04-06 18:16:26

0

1

403

JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...

From 2024-04-06 15:35:24

0

1

274

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...

From 2024-04-06 12:53:11

0

1

376

Related Topics

More>

• js method to get array length
• js refresh current page
• js rounding
• js method to delete node
• JavaScript escape characters
• How to generate random numbers in js
• How to enable JavaScript
• Detailed explanation of Symbol class in JS