探CSS与JS加载图片路径问题("稚鸟进")

来源:luqidong 发布时间:2013-08-16 19:53:28 点击数:
   ASP.NET网页布局时,经常会写用户控件这样的东西。图求方便。在控件中不乏需要引入一些图片。很多时候控件被使用的位置变动性
很大。今天又很纠结的遇到了这么一个问题。终于,下定决心来探个究竟。
      简单的文件结构图:
     78OA办公系统
      一丶当CSS样式文件嵌入在用户控件中是,如何让图中三个页面引用控件时均能正常浏览到对应的图片呢?
             OK。当您看到这个问题时,可能会想到页面中三个文件根本就不处于同一个目录,或文件所处的深度级数都不相同,在构想阶段可能就否定了这个实现。接下来在Defalut.aspx页面中嵌入如下测试代码:
            <style type="text/css">
                #test { background: url(../../../images/xw_checklist.jpg) no-repeat; height: 28px; width: 220px; }
            </style>
            BODY中代码如下:
            <div id="test">
            </div> 
            通过引用的图片路径来看,3次目录返回后。是肯定找不到对应的图片了。为此,我在根目录回返3次的文件目录下放置了一个同名但不同图像的图片。运行后发现,结果仍能够正确的加载到images下的对应图片。 OK,在这里我推测。VS加载图片路径时。文件的根目录(即Default.aspx)为终点引用目录。那么让图中三个页面引用控件时均能正常浏览到正确的图片时。那么可以在用户控件picbox的内嵌样式中给出如下图片路径:../../images/xw_checklist.jpg
            总结:当CSS样式文件内嵌在用户控件中时,只要保证深度级数最大的页面能够正确显示图片即可(在设计拆分时,除了文件深度和控件中内嵌的CSS样式图片深度相同的能够正确预览,其余的均查看不到。但是不影响运行结果。)
 
      二丶当CSS做为外部引用的方式嵌入到页面时,只要保证CSS中能够正确找到对应的图片即可。
             例如本结构图中,让3个界面正确的加载图片只需要如下写就OK了:
             针对a.css   图片路径这样写:background: url(../images/xw_checklist.jpg) no-repeat;
             针对b.css   图片路径这样写:background: url(../../images/xw_checklist.jpg) no-repeat; 
             本人亲测可行,且在拆分设计时,能够预览到对应的图片。
             总结:页面中嵌入外部css文件时,仅仅是提供一个样式连接,并不会将其加载到页面页面中,如在本例中,页面只会根据链接去css文件中寻找所需要的图片文件!
 
      三丶JS中设置图片又如何呢?
             具体测试如下:
             在a.js中写入如下代码:
             var funSet = function(obj) {
                obj.style.backgroundImage = 'url(images/xw_checklist.jpg)';}
             在b.js中写入如下代码:
             var funSet2 = function(obj) {
                obj.style.backgroundImage = 'url(images/xw_checklist.jpg)';}
            在default.aspx页面中引入a b两个脚本文件。并在body中嵌入代码如下:
            <div class="style1" onclick="funSet(this);">
            </div>
            <br/>
            <div class="style1" onclick="funSet2(this);">
            </div>
            a b两个脚本深度不相同。但是均被同一个页面所引用.通过default页面找图片时。路径格式为images/xxx.jpg 页面运行后。点击图片均能正常加载。
            总结:对于js脚本,html是把脚本加载到页面中一起解析的(就跟你的js脚本直接写在这个页面是同样的效果)。所以在JS中只需要图片相对于JS的引用页面的路径就可以了。