亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡單實(shí)用的原生img替換方案：xy-img

Cciradih / 1890人閱讀

摘要：引入使用鏈接圖片鏈接。比例可以設(shè)置一個(gè)比例來約束圖片的尺寸以寬度為基準(zhǔn)。小結(jié)上面簡單介紹了的使用，是一個(gè)原生組件，不限制于框架，可直接使用。

原生img的痛點(diǎn)

最近，xy-ui新增了一類組件xy-img，主要目的是為了代替原生img標(biāo)簽，解決了原生img在使用時(shí)通常會(huì)用一些問題

加載失敗的默認(rèn)顯示

無法直接設(shè)置圖片比例

無法懶加載（最新chrome可能支持，不完善）

無法點(diǎn)擊查看大圖

下面來看實(shí)際使用：

建議查看原文，可以實(shí)時(shí)交互

使用方式

使用方式很簡單

npm i xy-ui

或者直接從github拷貝源碼。
鏈接src

圖片鏈接。可以是絕對路徑，也可以是相對路徑。

當(dāng)圖片鏈接加載失敗時(shí)，會(huì)默認(rèn)顯示一個(gè)占位符

可以設(shè)置background和color來定制占位符
默認(rèn)鏈接defaultsrc

默認(rèn)鏈接。如果不能保證src一定能加載成功（一般是外部鏈接），可以設(shè)置一個(gè)defaultsrc來處理當(dāng)src加載失敗時(shí)的情況。

當(dāng)defaultsrc仍加載失敗時(shí)（當(dāng)然這種情況很少見，而且可控），會(huì)默認(rèn)顯示一個(gè)占位符

描述alt

可以設(shè)置一個(gè)描述，加載成功時(shí)會(huì)顯示在左下方，加載失敗時(shí)會(huì)顯示在占位符上。
比例ratio

可以設(shè)置一個(gè)比例來約束圖片的尺寸（以寬度為基準(zhǔn)）。

格式為w/h，如16/9。

自適應(yīng)fit

設(shè)置自適應(yīng)方式，同原生object-fit，可取值cover（默認(rèn)）、fill、contain。

懶加載lazy

可以設(shè)置lazy讓圖片在可見范圍時(shí)才加載，在此之前不會(huì)發(fā)送網(wǎng)絡(luò)請求，提升用戶體驗(yàn)。

畫廊gallery

可以設(shè)置gallery屬性，得到一個(gè)畫廊效果，此時(shí)鼠標(biāo)hover會(huì)出現(xiàn)標(biāo)識，點(diǎn)擊放大展示原圖大小，支持鍵盤操作。

加載失敗的圖片不會(huì)計(jì)入。

可以根據(jù)gallery屬性值自動(dòng)分類成不同組別。
小結(jié)

上面簡單介紹了xy-img的使用，xy-img是一個(gè)原生web組件，不限制于框架，可直接使用。如果想使用其他類似的組件，可關(guān)注xy-ui，匯集了其他各類常見交互組件，歡迎star~。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105899.html

相關(guān)文章

  • 《CSS世界》中提到的實(shí)用技巧

    摘要：一部分沒錄入的技巧原因是部分屬性將被標(biāo)準(zhǔn)廢棄，如。正確的滾動(dòng)底部留白方式如果使用留白，在和不會(huì)顯示。正方觀點(diǎn)觀點(diǎn)觀點(diǎn)反方觀點(diǎn)觀點(diǎn)正確的塊級元素右對齊值對于來講是占用剩余的空間。 以下技巧的具體原理和解釋請支持張老師的《CSS世界》，在這里不做展開。 一部分沒錄入的技巧原因是部分屬性將被標(biāo)準(zhǔn)廢棄，如：clip。還有一部分是因?yàn)閭€(gè)人覺得兼容性不好，而且CSS3的一些特性可以彌補(bǔ)，比如tex...

    oliverhuang 評論0 收藏0

  • 【JS實(shí)用技巧】優(yōu)化動(dòng)態(tài)創(chuàng)建元素的方式，讓代碼更加優(yōu)雅且利于維護(hù)

    摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護(hù)。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要?jiǎng)討B(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動(dòng)態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護(hù)呢？接下來我們通過研究一些實(shí)例...

    JeOam 評論0 收藏0

  • 【JS實(shí)用技巧】優(yōu)化動(dòng)態(tài)創(chuàng)建元素的方式，讓代碼更加優(yōu)雅且利于維護(hù)

    摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護(hù)。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要?jiǎng)討B(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動(dòng)態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護(hù)呢？接下來我們通過研究一些實(shí)例...

    hqman 評論0 收藏0

  • 移動(dòng)web開發(fā)問題和經(jīng)驗(yàn)總結(jié)

    摘要：的事件默認(rèn)綁在上的抓包瀏覽器連接安卓機(jī)測試實(shí)用網(wǎng)站適配測試兼容性網(wǎng)站前端開發(fā)雅虎條優(yōu)化準(zhǔn)則 前言 這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。 知識要點(diǎn) 1. Meta標(biāo)簽 1.禁止用戶縮放頁面，頁面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1 2.禁止ios上自動(dòng)識別電話 3.禁止android上自動(dòng)識別郵箱 4.針對ios上的...

    MorePainMoreGain 評論0 收藏0

  • 移動(dòng)web開發(fā)問題和經(jīng)驗(yàn)總結(jié)

    摘要：的事件默認(rèn)綁在上的抓包瀏覽器連接安卓機(jī)測試實(shí)用網(wǎng)站適配測試兼容性網(wǎng)站前端開發(fā)雅虎條優(yōu)化準(zhǔn)則 前言 這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。 知識要點(diǎn) 1. Meta標(biāo)簽 1.禁止用戶縮放頁面，頁面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1 2.禁止ios上自動(dòng)識別電話 3.禁止android上自動(dòng)識別郵箱 4.針對ios上的...

    yexiaobai 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<