資訊專欄INFORMATION COLUMN
摘要：打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發(fā)現(xiàn)微信對(duì)每一個(gè)都塞了也個(gè)占位圖，而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢微信所有的標(biāo)簽里都有自定義的這兩個(gè)屬性是關(guān)鍵是圖片的是圖片的高寬值設(shè)定的，。
打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發(fā)現(xiàn)微信對(duì)每一個(gè)img都塞了也個(gè)占位圖，而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢？
1.微信所有的img標(biāo)簽里,都有自定義的data-ratio,data-w.這兩個(gè)屬性是關(guān)鍵.
//data-w:是圖片的natural width. //data-ratio:是圖片的高/寬值.
2.js設(shè)定img的width=data-w，heigth= width*data-ratio。
3.不過，在第2步設(shè)定寬高之前，請(qǐng)保證img的src屬性有有效的值，不然，第2步會(huì)無效，在這里我們添加一個(gè)base64的小點(diǎn)作為占位圖（如下）:
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.當(dāng)對(duì)應(yīng)的img的圖片加載完成后，替換掉占位圖，去掉class img_loading 就好了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51466.html
摘要：打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發(fā)現(xiàn)微信對(duì)每一個(gè)都塞了也個(gè)占位圖，而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢微信所有的標(biāo)簽里都有自定義的這兩個(gè)屬性是關(guān)鍵是圖片的是圖片的高寬值設(shè)定的，。 打開一篇多圖的微信公眾好文章。在圖片加載過程中，我們發(fā)現(xiàn)微信對(duì)每一個(gè)img都塞了也個(gè)占位圖，而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢？ 1.微信所有的i...
閱讀 2365·2021-09-26 10:21
閱讀 2851·2021-09-08 09:36
閱讀 3099·2019-08-30 15:56
閱讀 982·2019-08-30 12:57
閱讀 970·2019-08-26 10:39
閱讀 3590·2019-08-23 18:11
閱讀 3119·2019-08-23 17:12
閱讀 1140·2019-08-23 12:18
