網(wǎng)頁中默認圖片的幾種解決方式

KevinYan 發(fā)布于2019-08-23 12:38 / 1398人閱讀

摘要：這樣我們也可以實現(xiàn)默認圖片的顯示不過這種方式本質上是多張圖片重疊在一起，如果上一層加載失敗，才會看得見底下的那一張，也就是說如果都加載成功，其實都是存在的。

現(xiàn)在網(wǎng)頁中圖片隨處可見，但避免不了有時會出現(xiàn)圖片資源失敗的情況，在谷歌瀏覽器中就會顯示這樣

這里的alt屬性是為了當圖片加載失敗時告訴用戶圖片信息的

能不能美化一下呢？

下面給出幾種方式

js 方式

相信大家碰到這種問題是，搜索的結果一般都是用圖片的onerror方法

onerror 事件會在文檔或圖像加載過程中發(fā)生錯誤時被觸發(fā)。
在裝載文檔或圖像的過程中如果發(fā)生了錯誤，就會調用該事件句柄。

使用方式也很簡單

但是，這個方法一定要注意，保證onerror里面賦值的圖片地址一定不能出錯，否則，就會無限調用onerror...

頁面直接崩掉..

有人說，我可以保證呀。那么，既然能保證，為什么還會有前面圖片加載失敗，而啟用備用圖片的情況發(fā)生呢？

當然，你可以采用base64的方式，缺點就是太長..類似下面這種

兼容性還是可以的，基本滿足日常開發(fā)。

那么有沒有css解決方式呢？

當然有，如果只用兼容主流瀏覽器的話

css 方式

這里提供兩種方式

偽元素

雖然img是單標簽，里面不能包裹其他元素，但是卻可以包含偽元素

不過這里有個特征，只有當圖片加載失敗或者沒有圖片的時候，才會顯示偽元素

既然如此，我們可以用偽元素來實現(xiàn)一個默認提示效果

img{
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    background: #ccc;
    vertical-align: top;
}
img:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("img/b.jpg") #ccc;
}

思路很簡單，就是用偽元素覆蓋在原圖片上，而且圖片加載失敗也沒什么問題，最多不顯示，也可以以純色背景作為默認占位圖。

背景圖片

還有一種方式，用到了css3中的多背景特性

div{
  background:url(a.jpg),
  url(b.jpg), 
  url(logo.png);
}

指定的時候，按瀏覽器中顯示時圖像疊放的順序從上往下指定的，第一個圖像文件是放在最上面的，最后指定的文件是放在最下面的。

這樣我們也可以實現(xiàn)默認圖片的顯示

.img{
    width: 200px;
    height: 200px;
    background: url("a.png"),url("logo.png") #f1f1f1
}

不過這種方式本質上是多張圖片重疊在一起，如果上一層加載失敗，才會看得見底下的那一張，也就是說如果都加載成功，其實都是存在的。那么就要注意了，如果上層的圖有透明部分，就有可能看得到底下的圖，漏光了！

如上，兩張圖都加載成功了，由于上層有透明部分，所以看到了底圖。所以在使用這種情況的時候，需要使用.jpg圖片，避免走光

小節(jié)

以上介紹了三種設置默認圖片的方式，

從兼容性方面來講，js方法適應性最廣，可以低版本兼容ie，其他兩種就不行了，只需注意備用圖片地址不要出錯就可以了

個人比較建議第二種偽元素方式，純css方式，html可以不做任何修改，適合對已有項目的體驗升級，有了體驗更好，沒有也無傷大雅

第三種就可以當娛樂看看了，當做一種思維方式吧，畢竟沒有任何語義化，給一個div，別人根本就不知道這是一張圖片，對搜索引擎也不友好。

各位小伙伴還有什么更好的方式呢？ ^^

大家如果喜歡我的博客，可以多多關注一下

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創(chuàng)建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98861.html

網(wǎng)頁中默認圖片的幾種解決方式

摘要：這樣我們也可以實現(xiàn)默認圖片的顯示不過這種方式本質上是多張圖片重疊在一起，如果上一層加載失敗，才會看得見底下的那一張，也就是說如果都加載成功，其實都是存在的。現(xiàn)在網(wǎng)頁中圖片隨處可見，但避免不了有時會出現(xiàn)圖片資源失敗的情況，在谷歌瀏覽器中就會顯示這樣 showImg(https://blog.codelabo.cn/img/201810/20181030192532.png); 這里的...

Null 2019-08-02 11:51 評論0 收藏0
網(wǎng)頁設計中分欄布局的幾種實現(xiàn)方案

摘要：在網(wǎng)頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。在網(wǎng)頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。三欄布局三欄布局最常見的就是左...

AlphaGooo 2019-08-01 17:36 評論0 收藏0
網(wǎng)頁設計中分欄布局的幾種實現(xiàn)方案

摘要：在網(wǎng)頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。在網(wǎng)頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。三欄布局三欄布局最常見的就是左...

jk_v1 2019-08-29 13:27 評論0 收藏0
返回頂部的幾種實現(xiàn)

摘要：返回頂部這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現(xiàn)也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

SillyMonkey 2019-08-02 15:56 評論0 收藏0
返回頂部的幾種實現(xiàn)

摘要：返回頂部這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現(xiàn)也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

silvertheo 2019-08-22 10:48 評論0 收藏0