HTML页面元素加载顺序研究报告（三…

最新推荐文章于 2025-06-21 09:50:36 发布

ineedappleki

最新推荐文章于 2025-06-21 09:50:36 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/error250/article/details/12852423

本文通过一个实验性的HTML页面探讨了JavaScript对于图片加载顺序的影响。页面中包含了多个图片及带有背景图片的CSS元素，并在JavaScript中加入了计算密集型任务以观察其对资源加载的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3、看下Javascript对图片加载顺序的影响

采用和之前类似的代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < title > 测试图片加载顺序 </ title >
         < link rel ="stylesheet" href ="css/style.css" />
     </ head >
     < body >
         < div id ="div1" >< img src ="images/Div1.jpg" /></ div >
         < div id ="div2" >< img src ="images/Div2.jpg" /></ div >
         < div id ="div3" >< img src ="images/Div3.jpg" /></ div >
         < div id ="cssContainer1" >
             < div id ="cssContainer2" style ="background-image:url('images/Css2.JPG')" ></ div >
             < script >
                var a;
                for(var i=0;i<1000;i++)
                {
                    a += i;
                }
             </ script >
             < div id ="cssContainer3" ></ div >
             < div id ="cssContainer4" style ="background-image:url('images/Css4.JPG')" ></ div >
         </ div >
         < div id ="div4" >< img src ="images/Div4.jpg" /></ div >
         < div id ="div5" >< img src ="images/Div5.jpg" /></ div >
         < div id ="div6" >< img src ="images/Div6.jpg" /></ div >
         < div id ="div7" >< img src ="images/Div7.jpg" /></ div >
         < div id ="div8" >< img src ="images/Div8.jpg" /></ div >
         < div id ="div9" >< img src ="images/Div9.jpg" /></ div >
         < div id ="div10" >< img src ="images/Div10.jpg" /></ div >
         < div id ="div11" >< img src ="images/Div11.jpg" /></ div >
         < div id ="div12" >< img src ="images/Div12.jpg" /></ div >
         < style >
        #cssContainer1{
            background-image:url("images/Css1.JPG");
        }
         </ style >
     </ body >
</ html >

体验新版博客