国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單實用的原生img替換方案：xy-img

Cciradih / 1808人閱讀

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

原生img的痛點

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

加載失敗的默認顯示

無法直接設置圖片比例

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

無法點擊查看大圖

下面來看實際使用：

建議查看原文，可以實時交互

使用方式

使用方式很簡單

npm i xy-ui

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

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

當圖片鏈接加載失敗時，會默認顯示一個占位符

可以設置background和color來定制占位符
默認鏈接defaultsrc

默認鏈接。如果不能保證src一定能加載成功（一般是外部鏈接），可以設置一個defaultsrc來處理當src加載失敗時的情況。

當defaultsrc仍加載失敗時（當然這種情況很少見，而且可控），會默認顯示一個占位符

描述alt

可以設置一個描述，加載成功時會顯示在左下方，加載失敗時會顯示在占位符上。
比例ratio

可以設置一個比例來約束圖片的尺寸（以寬度為基準）。

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

自適應fit

設置自適應方式，同原生object-fit，可取值cover（默認）、fill、contain。

懶加載lazy

可以設置lazy讓圖片在可見范圍時才加載，在此之前不會發送網絡請求，提升用戶體驗。

畫廊gallery

可以設置gallery屬性，得到一個畫廊效果，此時鼠標hover會出現標識，點擊放大展示原圖大小，支持鍵盤操作。

加載失敗的圖片不會計入。

可以根據gallery屬性值自動分類成不同組別。
小結

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

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

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

相關文章

  • 《CSS世界》中提到的實用技巧

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

    oliverhuang 評論0 收藏0

  • 【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

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

    JeOam 評論0 收藏0

  • 【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

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

    hqman 評論0 收藏0

  • 移動web開發問題和經驗總結

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

    MorePainMoreGain 評論0 收藏0

  • 移動web開發問題和經驗總結

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

    yexiaobai 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<