动态加载图片路径 保持JavaScript控件的相对独立性

当时考虑有三种方法：
1.直接把路径写在js文件里，但如果引用页面路径层级改变就没辙了。
2.写个class，放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要，单独建立相应css文档似乎小题大做。
3.把以上两个方法排除后，自然要采用动态加载图片路径的方法咯。
关键代码如下：


代码如下:

//创建一个全局变量保存路径
var imgRootUrl = "";

//获取图片路径所在目录
var strPath=window.document.location.pathname; //获取主机地址之后的目录部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//获取目录层级
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //这个Images其实也可设为参数，由于所有项目图片文件夹命名固定，所以没有设立参数，但仍然保存可扩展性。

加图后，控件效果是相当美观了：

顺便附上所有window.document.location其下属性：
document.location.hash // #号后的部分 VS window.location.hash
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分(应用程序)
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分

赞 (0)

相关推荐

  • 完美兼容多浏览器的js判断图片路径代码汇总

    第一种方式 //检查图片是否存在 function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片,则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { alert(imgurl + '存在'); } else { alert(imgurl +

  • 图片路径中含有中文在jsp下不能正常显示的原因及解决

    如:<img src="/pic/lupload/img工行上传.jpg" />,图片路径正确,放到一个单独的html页面中也能正常打开,在jsp中就是不显示图片 原因在于没有在tomcat配置URIEncoding.修改方法: 在tomcat的server.xml中加入URIEncoding="utf-8"(网页的编码是utf-8) 复制代码 代码如下: <Connector port="8080" URIEncoding=&

  • javascript批量检查当图片不存在时则显示默认图片的代码

    这个是批量的检查,比较好的思路 在不存在图片时显示默认图片练习 by 阿会楠 img{ border:1px solid #cccccc; width:100px; height:50px; } var imgs = document.images; for(var i = 0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 用Javascript判断图片是否存在,不存在则显示默认图片的代码可以参考下面的http://www.jb51.net/article/8796.htm

  • 图片不存在使用默认图片代替的实例

    web.config: 复制代码 代码如下: <configuration>  <appSettings>    <add key="dmPic" value="bgImages/moren.jpg" />  </appSettings></configuration> 相应.cs页面: 复制代码 代码如下: if (sdr.Read()){    this.lblDianMianMingCheng.Tex

  • 解决图片路径中含有中文在jsp下不能正常显示问题

    如:<img src="/pic/lupload/img工行上传.jpg" />,图片路径正确,放到一个单独的html页面中也能正常打开,在jsp中就是不显示图片 原因在于没有在tomcat配置URIEncoding.修改方法: 在tomcat的server.xml中加入URIEncoding="utf-8"(网页的编码是utf-8) 复制代码 代码如下: <Connector port="8080" URIEncoding=&

  • jquery解决图片路径不存在执行替换路径

    复制代码 代码如下: $("img").error(function() { $(this).attr("src", "Images/error.jpg"); }); 当图片路径不存在,可以设置为其他有好的图片来显示

  • 用Javascript判断图片是否存在，不存在则显示默认图片的代码

    用Javascript判断图片是否存在，不存在则显示默认图片的代码

    利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的URL. 第一种情况:图片存在,正常显示 第二种情况:图片不存在,显示默认图片 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面是通过js的判断用javascript判断指定图片文件是否存在: 如判断<img src="http://www.jb51.net/logos.gif">这个图片地址是否存在. 如果不存在,隔几秒重新探测此图片,如果地址有效则,提示地址有效 复

  • 通过JS获取用户本地图片路径并显示的代码

    复制代码 代码如下: <!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> <meta http-equiv=&qu

  • 动态加载图片路径 保持JavaScript控件的相对独立性

    动态加载图片路径 保持JavaScript控件的相对独立性

    当时考虑有三种方法: 1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了. 2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用.但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做. 3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯. 关键代码如下: 复制代码 代码如下: //创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strPath=wi

  • javascript实现瀑布流动态加载图片原理

    本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="

  • IE6,IE7下js动态加载图片不显示错误

    先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a> 这么多小的缩略图标签循环平铺下来,当单击小的图片时,动态加载大的图片显示,就类似于淘宝的商品查看图片.页面上有一个标签: <div id=&quo

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • Java web开发中加载图片路径的两种方式

    (1)   src="/image/1_it.jpg" (2)   src="http://localhost:8080/image/1_it.jpg" 其中localhost可以换位你的电脑IP,端口号也要相应改变. 以上均在基于编译器idea以及tomcat服务器开发的web中测试可行!都是要先定位到项目的位置! 以上所述是小编给大家介绍的Java web开发加载图片路径的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

  • vue3.x使用swiperUI动态加载图片失败的解决方法

    vue3.x使用swiperUI动态加载图片失败的解决方法

    本文实例为大家分享了vue3.x使用swiperUI动态加载图片失败的具体解决方法,供大家参考,具体内容如下 版本号: vue/cli:4.5.12swiper:^6.8.4 问题 1.动态加载图片,但是动态加载图片为空,需要显示默认图片时使用v-if失效 <div class="swiper-container home_swiper">     <div class="swiper-wrapper" v-if="aImages.len

  • jquery动态加载图片数据练习代码

    jquery动态加载图片数据练习代码

    这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片. 思路: 1.首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片. 2.建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求. 3.然后当然要用到数据库啦,包括图片的路径,描述等信息.每张小图片路径应该对应一张大图

  • PhotoSwipe异步动态加载图片方法

    在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片. 特点: 1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限. 3. 从PhotoSwipe用法来看,在PhotoSwipe初始化前必须把所有图片列出.  instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); 标签a是PhotoSwipe初始化前的, 之后

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

随机推荐