删除src值为空的img标签

时间:2023-03-09 08:34:13
删除src值为空的img标签

今天刚刚完成了一个官网的前后台整站建设,虽然不是很复杂,但感觉获益良多。由于涉及到一点后台问题,所以期间遇到了不少问题。学到的东西,得作个总结。今天先讲讲img的路径问题。由于现在很多网站喜欢全屏大图滚动,而浏览设备的尺寸也变得越来越多,越来越大。所以解决图片适应性问题,变得更加复杂。

切入正题,根据客户的设计需求,首页大图要满足以下条件:

  1,图片适应各种中大屏且全屏铺满;

  2,中间文字不能变形;

  3,可接受不加文字情况。

删除src值为空的img标签

  所以,上面滚动大图就得实现图文分离,大图可延伸,文字居中。

  由于展示大图的数量是不定的,是否添加文本区域(用图片来实现)也是不确定的,所以后台通过循环输出。后台主要循环滚图容器和图片链接,对于那些没有添加文本图片的情况来说,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:删除src值为空的img标签   IE8:删除src值为空的img标签

  由于IE与其他浏览器之间存在差异,所以需要作两者的兼容性处理,substring()和lastIndexOf()结合使用,将前面共同部分截取处理作相等判断。

  在底部加了这段代码后,在IE下再也不用担心img标签的src路径为空时,会显示一个大大的丑陋的叉啦!

            删除src值为空的img标签