成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

hearaway / 3084人閱讀

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

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

0. 效果

查看demo

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

可以是文字或者 iconfont, 并將圖標(biāo)顯示到正中間
HTML 結(jié)構(gòu)如下：


  

.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; // 使圖片加載后能夠后直接蓋住圖標(biāo)
  }
}
2. 利用 lazyload 加載圖片 3. 加載加粗文字失敗后更改圖標(biāo)（或文字）

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

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

效果和完整代碼見上面 demo

4. 參考

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115230.html

相關(guān)文章

  • vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方案

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

    3403771864 評論0 收藏0

  • html&amp;css面試筆記

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

    maochunguang 評論0 收藏0

  • html&amp;css面試筆記

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

    zhangwang 評論0 收藏0

  • html&amp;&amp;css

    摘要：標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距?？刂票韱慰丶慕脿顟B(tài)。首先，巧妙的使用這一標(biāo)記，將游覽器從所有情況中分離出來。 1.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別 聲明位于位于HTML文檔中的第一行，處于?標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在...

    gggggggbong 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<