删除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路径为空时，会显示一个大大的丑陋的叉啦！