今天剛剛完成了一個官網的前后台整站建設，雖然不是很復雜，但感覺獲益良多。由於涉及到一點后台問題，所以期間遇到了不少問題。學到的東西，得作個總結。今天先講講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路徑為空時，會顯示一個大大的丑陋的叉啦！
