sbpya

浏览: 623342 次
性别:
来自: 杭州，长沙

最近访客更多访客>>

降服rails

liuxiao723846

z1050334

kanpiaoxue

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML页面元素加载顺序研究报告（4）----用JavaScript插入图片

博客分类：

Web前端

HTML JavaScript IE CSS Firebug

4.下面我们试试用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" />
    <script src="script/main.js"></script>
</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="script1">
    </div>
    <div id="script2">
    </div>
    <div>
        <div id="cssContainer1">
            <div id="cssContainer2" style="background-image: url('images/Css2.jpg')">
            </div>
            <script>inputImage("script2", "images/Script2.JPG")</script>
            <div id="cssContainer3">
            </div>
            <script>inputImage("script1", "images/Script1.JPG")</script>
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.jpg')">
        </div>
        <div id="div4">
            <img src="images/Div4.jpg" /></div>
    </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>

inputImage方法是把一张图片插入一个Div中：

function inputImage(divid, imgpath) {
    var divImage = document.getElementById(divid);
    divImage.innerHTML = '<img src="' + imgpath + '" />';
}

IE7+HttpWatch：

这种情况用第三节的结论很容易说明：在<script>inputImage("script2", "images/Script2.JPG")</script>处，先执行脚本，加载图片Script2，然后加载在Script2之前的图片Css5（Css5是在外部Css文件中声明的，修饰的是cssContainer1的背景图片，由于后面还有内联的Style，所以这里Css5被IEAbort了）以及Css2，之后执行<script>inputImage("script1", "images/Script1.JPG")</script> 加载图片Script1，然后加载在Script1之前的图片Css3。接下来顺序加载内嵌图片以及背景图片。

FF3.0+Firebug

这里可以看到与IE不同，Firefox是先加载背景图片再加载脚本插入的图片。结合第三节，可以认为Firefox把脚本插入的图片和背景图片作为相同加载顺序权值的图片看待，它们之间的加载顺序按照在页面上出现的先后安排。

但有时在IE下会出现下面的情况：

这是什么原因呢？

第二段代码：

<!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" />
    <script src="script/main.js"></script>
</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="script1">
    </div>
    <div id="script2">
    </div>
    <div>
        <div id="cssContainer1">
            <div id="cssContainer2" style="background-image: url('images/Css2.jpg')">
            </div>

            <script>inputImage("script2", "images/Script2.JPG")</script>

            <div id="cssContainer3">
            </div>
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.jpg')">
        </div>
        <div id="div4">
            <img src="images/Div4.jpg" /></div>
    </div>
    <div id="div5">
        <img src="images/Div5.jpg" /></div>
    <script>window.onload = function() { inputImage("script1", "images/Script1.JPG"); }</script>
    <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>

这里onload闪亮登场，看表现：

FF3.0+Firebug

很明显，放在onload事件里加载的图片被放在最后才加载，这也很好理解。

IE7+HttpWatch：

IE表现出了多样性，不得不认为，对于IE来说，Script标签是个不稳定因素，它的影响是确定的，但影响的结果是不定的……

分享到：

HTML页面元素加载顺序研究报告（5）----Sc ... | HTML页面元素加载顺序研究报告（3）----Sc ...

2010-06-09 13:08
浏览 3442
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML页面元素加载顺序研究报告（4）----用JavaScript插入图片

4.下面我们试试用Javascript插入图片

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML页面元素加载顺序研究报告（4）----用JavaScript插入图片

4.下面我们试试用Javascript插入图片

评论

发表评论

相关推荐

List of mine types

document.getElementsByName在IE下的bug解决

JS文件中获取contextPath的方法

javascript获取当前鼠标在屏幕上的会标(转)

HTML页面元素加载顺序研究报告（5）----Script标签在Firefox下对背景图片的影响

HTML页面元素加载顺序研究报告（3）----Script标签与背景图片(转)

HTML页面元素加载顺序研究报告（2）----背景图片(转)

HTML页面元素加载顺序研究报告（1）----简单Div罗列(转)

提高网站访问速度的34条军规二 (转)

提高网站访问速度的34条军规一 (转)

JavaScript输出中文乱码的解决方法

javascript动态循环添加行及行中的事件调用带参数的函数

(转)a href=#与 a href=javascript:void(0) 的区别

树型对象的table展现形式思考

Javascript实现web表格宽度拖动(分固定宽度和不固定宽度)

JSeclipse最新的update地址

Javascript窗口与提示大全

web标准：div+css命名规则

四种悬浮DIV提示效果

javascript中数组去除重复值

最近访客更多访客>>