刪除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路徑爲空時，會顯示一個大大的醜陋的叉啦！