成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

hearaway / 3028人閱讀

摘要：時(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115230.html

相關(guān)文章

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

    　　想必大家對(duì)于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 評(píng)論0 收藏0

  • html&amp;css面試筆記

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

    maochunguang 評(píng)論0 收藏0

  • html&amp;css面試筆記

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

    zhangwang 評(píng)論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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<