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

資訊專欄INFORMATION COLUMN

微信公眾號文章中圖片加載時，占位圖寬高大小的確定

Kylin_Mountain / 2661人閱讀

摘要：打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發現微信對每一個都塞了也個占位圖，而且占位圖的寬高就是實際加載完圖的寬高。這是如何做到的呢微信所有的標簽里都有自定義的這兩個屬性是關鍵是圖片的是圖片的高寬值設定的，。

打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發現微信對每一個img都塞了也個占位圖，而且占位圖的寬高就是實際加載完圖的寬高。這是如何做到的呢？

1.微信所有的img標簽里,都有自定義的data-ratio,data-w.這兩個屬性是關鍵.

  //data-w:是圖片的natural width.
  //data-ratio:是圖片的高/寬值.

2.js設定img的width=data-w，heigth= width*data-ratio。

3.不過，在第2步設定寬高之前，請保證img的src屬性有有效的值，不然，第2步會無效，在這里我們添加一個base64的小點作為占位圖（如下）:

src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==";

4.再給img添加一些樣式：

.img_loading {
        background-color: #e3dcdc;
        border: 1 px solid #e3dcdc;
        background-size: 22px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(loading.gif);
}

5.當對應的img的圖片加載完成后，替換掉占位圖，去掉class img_loading 就好了

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

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

相關文章

  • 微信公眾號文章中圖片加載時，占位圖寬高大小的確定

    摘要：打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發現微信對每一個都塞了也個占位圖，而且占位圖的寬高就是實際加載完圖的寬高。這是如何做到的呢微信所有的標簽里都有自定義的這兩個屬性是關鍵是圖片的是圖片的高寬值設定的，。 打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發現微信對每一個img都塞了也個占位圖，而且占位圖的寬高就是實際加載完圖的寬高。這是如何做到的呢？ 1.微信所有的i...

    Cheng_Gang 評論0 收藏0

發表評論

0條評論

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