dom加载 · PHP学习 · 看云

AI写作智能体 自主规划任务，支持联网查询和网页读取，多模态高效创作各类分析报告、商业计划、营销方案、教学内容等。广告

# dom加载一般情况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。 ``` <pre class="calibre10">``` <span class="token6">1.</span>HTML解析完毕； <span class="token6">2.</span>外部脚本和样式加载完毕； <span class="token6">3.</span>脚本在文档内解析并执行； <span class="token6">4.</span>HTML DOM完全构造起来； <span class="token6">5.</span>图片和外部内容加载； <span class="token6">6.</span>网页完成加载。 ``` ``` DOM结构加载后便触发 ``` <pre class="calibre10">``` <span class="token">//javascript</span> DOMContentLoaded DOM树构建完成时触发事件<span class="token3">(</span>IE没有此事件<span class="token3">)</span>不再举例 <span class="token">//jquery：</span> $<span class="token3">(</span>document<span class="token3">)</span><span class="token3">.</span><span class="token4">ready</span><span class="token3">(</span><span class="token3">)</span> $<span class="token3">(</span><span class="token5">function</span><span class="token3">(</span><span class="token3">)</span><span class="token3">{</span><span class="token3">}</span><span class="token3">)</span> ``` ``` 页面加载完成后触发 > 指示页面包含图片等文件在内的所有元素都加载完成。所以我们要点击图片触发事件等就需要用到lond方法 ``` <pre class="calibre17">``` <span class="token">//javascript</span> window<span class="token3">.</span>onload <span class="token1">=</span> <span class="token5">function</span><span class="token3">(</span><span class="token3">)</span><span class="token3">{</span><span class="token3">}</span><span class="token3">;</span> <span class="token">//jquery废弃:</span> $<span class="token3">(</span>window<span class="token3">)</span><span class="token3">.</span><span class="token4">load</span><span class="token3">(</span><span class="token5">function</span> <span class="token3">(</span><span class="token3">)</span><span class="token3">{</span> <span class="token">// 编写代码高版本已经废弃 </span> <span class="token3">}</span><span class="token3">)</span><span class="token3">;</span> <span class="token">//jquery$(window).load(）新写法</span> $<span class="token3">(</span>window<span class="token3">)</span><span class="token3">.</span><span class="token4">on</span><span class="token3">(</span><span class="token2">'load'</span><span class="token3">,</span> <span class="token5">function</span><span class="token3">(</span><span class="token3">)</span><span class="token3">{</span> <span class="token3">.</span><span class="token3">.</span><span class="token3">.</span><span class="token3">}</span><span class="token3">)</span><span class="token3">;</span> ``` ```