檢查圖片是否存在避免出現叉燒包的function- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1016

會員總數：246713
討論主題：190131

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> 檢查圖片是否存在避免出現叉燒包的function

[]

[我要回覆]

檢查圖片是否存在避免出現叉燒包的function
價值 : 50 QP 點閱數:3526 回應數:14

樓主

迷路

11376	140
8309	1754

發送站內信

問題一
在IE8和火狐執行時網頁第一次開啟時，經常會有圖片被替換掉
如果重整個兩次圖就會全部正常
問題二
chrome執行時，所有圖片都被替換掉，就算重整也沒有用

請教該如何修正

本篇文章發表於2012-12-14 17:10

1樓不錯的參考香帥	您用尺寸判斷ie瀏覽器還是會有一個叉燒包圖建議以圖檔副檔名來判斷,參考以下程式碼: <html> <body> <img src="./image/錯誤的圖" vspace="2" />無圖<br /> <img src="./image/001.jpg" vspace="2" />有圖<br /> <img src="./image/002.jpg" vspace="2" />有圖<br /> <img src="./image/無圖" vspace="2" />無圖<br /> </body> </html> <script type="text/javascript"> window.onload = chkimg(); function chkimg(){ var imglist= document.getElementsByTagName("img"); var re = /\.jpg$/i; for(var i=0;i<imglist.length;i++){ if (!re.test(imglist[i].src)) imglist.item(i).src = "./image/nophoto.gif"; } } </script> 測試網址在 http://ap.a168a.com/test/nopic2.htm 本篇文章回覆於2012-12-14 21:57 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考 KKBruce	1F的處理方式有缺點。你想想，你是在網頁載入完成後才能進行換圖的動作， 1. 網頁載入完成，如果是速度比較慢，一樣會出現打X圖，然後再換成你預設錯誤圖。 2. 網頁載入完成，以此「http://ap.a168a.com/test/nopic2.htm」範例而言，你永遠都會得到兩個HTTP 404 錯誤。用Script去處理圖片的錯誤，對於網站而言，不是最正確的方式，應該想辦法去修正圖片"路徑/檔名"所產生的錯誤，而且太多的HTTP 404錯誤，SEO的分數會很低的。只能說，用Script來處理頂多只是在「做表面」，讓使用者知道有錯，而且只是好看一些的錯。本篇文章回覆於2012-12-14 22:35 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	回2# 我用ie6,ie9測都沒問題如下圖並不會產生錯誤本篇文章回覆於2012-12-14 22:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應香帥	若真有錯誤,可將 <img src="./image/錯誤的圖" vspace="2" />無圖<br /> 改用空白圖檔的小檔名,還是一個可以考慮用的方法本篇文章回覆於2012-12-14 22:52 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應香帥	再補充一個googleChrome瀏覽器也不會有錯誤如下圖本篇文章回覆於2012-12-14 22:59 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓回應 KKBruce	404錯誤，你怎麼移除，請問。本篇文章回覆於2012-12-14 23:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
7樓回應 KKBruce	1F對自己的程式那麼有自信，容我請問：我用Web API(RESTful方式)寫了一支取大頭照程式，圖片路徑都是類似： "/Person/Logo/KKBruce" 請問，你的程式如何判斷我是否有取圖成功？本篇文章回覆於2012-12-14 23:17 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
8樓回應香帥	回6# 還是可以加上用4樓方法. 不過那錯誤是網站分析的用的,並不是會顯示在客戶前面且那排名是參考用的,一般人都有自己管道,要上哪個網站就上哪個網站不會先去查排名才考慮要不要上該網站瀏覽. 本篇文章回覆於2012-12-14 23:24 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
9樓回應香帥	回7樓早在vb6時,在抓網路圖都會連續的那都有完成事件可以判斷,才會自動抓下一張圖當然能夠加上時間判斷是最好的不然您遇到網路半斷時 CRC重複校正,就不是正常可以判斷的在網路的抓取,有時會抓到半圖,還是可以顯示最後還是使用者看到的為準本篇文章回覆於2012-12-14 23:34 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
10樓最有價值解答 demo	利用onerror()處理圖片失連時替換顯示圖 \| demo小鋪本篇文章回覆於2012-12-15 10:56 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
11樓回應 Allen	to #1, 我沒很仔細看您的code,但看起來您似乎只是用副檔名有沒有jpg 但若有html <img src="dummy.jpg"> 但網站其實沒dummy.jpg,是否您的方法就失效了呢? 用#10的方法好像就沒這問題本篇文章回覆於2012-12-15 18:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
12樓回應香帥	to 11# 10樓是一個錯誤補圖的好方法我的是利用檔名處理,不一定只是副檔名,那只是參考我原來只是看到樓主提供的程式碼用圖的高度判斷,說有問題,因此提供另一個方法可以參考使用 ,不過這要看樓主的需要,若真的常抓不到圖,10#真的比較適合本篇文章回覆於2012-12-15 21:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
13樓回應 Allen	好不好用我也不確定，幾年前轉載這用法時有人反應有時不行，我也有遇過，就盡人事囉本篇文章回覆於2012-12-16 01:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
14樓作者回應迷路	會想用script就是想偷懶只要把script載入每個網頁就能做避免叉燒包的功能不過果然想要效果好就不能偷懶呢感謝各位大大的回覆抱歉，年末工作爆量，到現在才回覆本篇文章回覆於2012-12-27 14:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓不錯的參考香帥	您用尺寸判斷ie瀏覽器還是會有一個叉燒包圖建議以圖檔副檔名來判斷,參考以下程式碼: <html> <body> <img src="./image/錯誤的圖" vspace="2" />無圖<br /> <img src="./image/001.jpg" vspace="2" />有圖<br /> <img src="./image/002.jpg" vspace="2" />有圖<br /> <img src="./image/無圖" vspace="2" />無圖<br /> </body> </html> <script type="text/javascript"> window.onload = chkimg(); function chkimg(){ var imglist= document.getElementsByTagName("img"); var re = /\.jpg$/i; for(var i=0;i<imglist.length;i++){ if (!re.test(imglist[i].src)) imglist.item(i).src = "./image/nophoto.gif"; } } </script> 測試網址在 http://ap.a168a.com/test/nopic2.htm 本篇文章回覆於2012-12-14 21:57 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考 KKBruce	1F的處理方式有缺點。你想想，你是在網頁載入完成後才能進行換圖的動作， 1. 網頁載入完成，如果是速度比較慢，一樣會出現打X圖，然後再換成你預設錯誤圖。 2. 網頁載入完成，以此「http://ap.a168a.com/test/nopic2.htm」範例而言，你永遠都會得到兩個HTTP 404 錯誤。用Script去處理圖片的錯誤，對於網站而言，不是最正確的方式，應該想辦法去修正圖片"路徑/檔名"所產生的錯誤，而且太多的HTTP 404錯誤，SEO的分數會很低的。只能說，用Script來處理頂多只是在「做表面」，讓使用者知道有錯，而且只是好看一些的錯。本篇文章回覆於2012-12-14 22:35 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	回2# 我用ie6,ie9測都沒問題如下圖並不會產生錯誤本篇文章回覆於2012-12-14 22:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應香帥	若真有錯誤,可將 <img src="./image/錯誤的圖" vspace="2" />無圖<br /> 改用空白圖檔的小檔名,還是一個可以考慮用的方法本篇文章回覆於2012-12-14 22:52 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應香帥	再補充一個googleChrome瀏覽器也不會有錯誤如下圖本篇文章回覆於2012-12-14 22:59 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓回應 KKBruce	404錯誤，你怎麼移除，請問。本篇文章回覆於2012-12-14 23:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
7樓回應 KKBruce	1F對自己的程式那麼有自信，容我請問：我用Web API(RESTful方式)寫了一支取大頭照程式，圖片路徑都是類似： "/Person/Logo/KKBruce" 請問，你的程式如何判斷我是否有取圖成功？本篇文章回覆於2012-12-14 23:17 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
8樓回應香帥	回6# 還是可以加上用4樓方法. 不過那錯誤是網站分析的用的,並不是會顯示在客戶前面且那排名是參考用的,一般人都有自己管道,要上哪個網站就上哪個網站不會先去查排名才考慮要不要上該網站瀏覽. 本篇文章回覆於2012-12-14 23:24 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
9樓回應香帥	回7樓早在vb6時,在抓網路圖都會連續的那都有完成事件可以判斷,才會自動抓下一張圖當然能夠加上時間判斷是最好的不然您遇到網路半斷時 CRC重複校正,就不是正常可以判斷的在網路的抓取,有時會抓到半圖,還是可以顯示最後還是使用者看到的為準本篇文章回覆於2012-12-14 23:34 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
10樓最有價值解答 demo	利用onerror()處理圖片失連時替換顯示圖 \| demo小鋪本篇文章回覆於2012-12-15 10:56 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
11樓回應 Allen	to #1, 我沒很仔細看您的code,但看起來您似乎只是用副檔名有沒有jpg 但若有html <img src="dummy.jpg"> 但網站其實沒dummy.jpg,是否您的方法就失效了呢? 用#10的方法好像就沒這問題本篇文章回覆於2012-12-15 18:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
12樓回應香帥	to 11# 10樓是一個錯誤補圖的好方法我的是利用檔名處理,不一定只是副檔名,那只是參考我原來只是看到樓主提供的程式碼用圖的高度判斷,說有問題,因此提供另一個方法可以參考使用 ,不過這要看樓主的需要,若真的常抓不到圖,10#真的比較適合本篇文章回覆於2012-12-15 21:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
13樓回應 Allen	好不好用我也不確定，幾年前轉載這用法時有人反應有時不行，我也有遇過，就盡人事囉本篇文章回覆於2012-12-16 01:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
14樓作者回應迷路	會想用script就是想偷懶只要把script載入每個網頁就能做避免叉燒包的功能不過果然想要效果好就不能偷懶呢感謝各位大大的回覆抱歉，年末工作爆量，到現在才回覆本篇文章回覆於2012-12-27 14:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--