删除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你够了！(#‵′)凸）

　　不说那么多，直接上代码。

 var imgs = document.getElementsByTagName("img");
      for(var i=0;i<imgs.length;i++){
             var src = imgs[i].src;
             var href1 = window.location.href.substring(0,location.href.lastIndexOf('/')+1);//IE
             var href2 = window.location.href;//非IE
             //alert(src);
             //alert(href1);
             //alert(href2);
                 if(src==""||src==href1||src==href2){
                     imgs[i].parentNode.removeChild(imgs[i]);
                 };
      }

　　在谷歌浏览器下，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路径为空时，会显示一个大大的丑陋的叉啦！