删除src值为空的img标签
今天刚刚完成了一个官网的前后台整站建设，虽然不是很复杂，但感觉获益良多。由于涉及到一点后台问题，所以期间遇到了不少问题。学到的东西，得作个总结。今天先讲讲img的路径问题。由于现在很多网站喜欢全屏大图滚动，而浏览设备的尺寸也变得越来越多，越来越大。所以解决图片适应性问题，变得更加复杂。
切入正题，根据客户的设计需求，首页大图要满足以下条件：
1，图片适应各种中大屏且全屏铺满；
2，中间文字不能变形；
3，可接受不加文字情况。
所以，上面滚动大图就得实现图文分离，大图可延伸，文字居中。
由于展示大图的数量是不定的，是否添加文本区域（用图片来实现）也是不确定的，所以后台通过循环输出。后台主要循环滚图容器和图片链接，对于那些没有添加文本图片的情况来说，img标签内的src不会赋予任何值，这时候src的值为空。如果在非IE浏览器下编写<img src="" alt="" >这样的标签是不会显示任何内容的， 可是在IE下会出现一个丑陋的红色叉叉。所以我们得把这个空的img标签去掉。
那么如何找到这个标签并删除它呢？
因为后台循环输出多个内容，设id来获取img是肯定不行的。使用能获取class名的库或者编写能获取class的函数，然后赋予循环的标签一个class，这样也可以。但是为了删除一个img而这样做，不到万不得已我也不想牺牲那么多代码。所以我肯定是使用标签名来获取的，var imgs = document.getElementsByTagName("img");
那第二个问题是我怎么判断是这个标签呢？
if(imgs[i]==""){}?
不！NAIVE！
原来当img标签的src属性值为空时，输出它的时候src值会是当前页面的绝对路径！
那我这样写估计可以了吧？！
if(imgs[i]==window.location.href){}
图样图森破！
在IE下img的src路径设置为空时，它会自动设成当前页面文件夹的绝对路径，但不包含当前页面！（IE你够了！(#‵′)凸）
不说那么多，直接上代码。
1 var imgs = document.getElementsByTagName("img"); 2 for(var i=0;i<imgs.length;i++){ 3 var src = imgs[i].src; 4 var href1 = window.location.href.substring(0,location.href.lastIndexOf('/')+1);//IE 5 var href2 = window.location.href;//非IE 6 //alert(src); 7 //alert(href1); 8 //alert(href2); 9 if(src==""||src==href1||src==href2){ 10 imgs[i].parentNode.removeChild(imgs[i]); 11 }; 12 }
在谷歌浏览器下，src弹出来的是 http://127.0.0.1:8020/demo/temp.html，也就是本页面的绝对路径；由于href1作了切割，所以href1弹出的是 http://127.0.0.1:8020/demo/；而href2也是当前页完整的绝对路径 http://127.0.0.1:8020/demo/temp.html。
但在IE8浏览器下，src弹出来的却是http://127.0.0.1:8020/demo/。它没有包含本html文件，也就是说它只是本页面所在文件夹的绝对路径；href1和href2同上。
chrome：
IE8：
由于IE与其他浏览器之间存在差异，所以需要作两者的兼容性处理，substring()和lastIndexOf()结合使用，将前面共同部分截取处理作相等判断。
在底部加了这段代码后，在IE下再也不用担心img标签的src路径为空时，会显示一个大大的丑陋的叉啦！
