CSS 無圖片顯示加載(&失敗)效果

hearaway 發布于2019-08-30 13:00 / 3004人閱讀

摘要：時利用顯示加載圖片和加載失敗效果效果查看顯示加載中或者品牌圖可以是文字或者并將圖標顯示到正中間結構如下使圖片加載后能夠后直接蓋住圖標利用加載圖片加載加粗文字失敗后更改圖標或文字這里需要用在圖片里添加隱藏出錯圖片效

lazyload 時利用 iconfont 顯示加載圖片和加載失敗效果

0. 效果

查看demo

1. 顯示加載中或者品牌圖

可以是文字或者 iconfont, 并將圖標顯示到正中間
HTML 結構如下：

.img-placeholder {
  font-size: 6em; line-height: 1; color: #999 !important;
  position: relative;

  &::after {
    content: "Loading";
    @include position(absolute, 50% 0 null);
    margin-top: -.5em;
    line-height: inherit;
    z-index: -1; // 使圖片加載后能夠后直接蓋住圖標
  }
}

2. 利用 lazyload 加載圖片 3. 加載加粗文字失敗后更改圖標（或文字）

這里需要用 js 在圖片 onerror 里添加 class="img-error"

&.img-error::after {
  content: "Load failed";
  font-size: 20px;
}
&.img-error img {
  display: none; // 隱藏出錯圖片
}

效果和完整代碼見上面 demo

4. 參考

SCSS 部分使用了 http://bourbon.io/

直接使用 img:after，兼容性不好

云服務器 GPU云服務器加載css失敗效果顯示 css jquery js 顯示數據加載動畫效果服務器圖片加載失敗

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

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

vue3.x使用swiperUI動態加載圖片失敗的解決方案

　　想必大家對于vue3.x都很了解，那在vue3.x使用swiperUI動態加載圖片失敗時候如何解決？以下就為大家介紹兩個常見問題：　　1、在動態加載圖片是空，需要顯示默認圖片時使用v-if失效　　<divclass="swiper-containerhome_swiper"> 　　<divclass="swiper-wrapper"v-...

3403771864 2022-09-08 21:44 評論0 收藏0
html&amp;css面試筆記

摘要：什么叫優雅降級和漸進增強漸進增強針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 1、CSS選擇器有哪些？它們的優先級是怎樣的？選擇器類型： id選擇器（ # myid）類選擇器（.myclassname）標簽選擇器 ...

maochunguang 2019-08-29 16:14 評論0 收藏0
html&amp;css面試筆記

摘要：什么叫優雅降級和漸進增強漸進增強針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 1、CSS選擇器有哪些？它們的優先級是怎樣的？選擇器類型： id選擇器（ # myid）類選擇器（.myclassname）標簽選擇器 ...

zhangwang 2019-08-02 11:07 評論0 收藏0
html&amp;&amp;css

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。控制表單控件的禁用狀態。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。 1.Doctype作用？標準模式與兼容模式各有什么區別聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 評論0 收藏0