摘要:打開一篇多圖的微信公眾好文章。在圖片加載過程中,我們發(fā)現(xiàn)微信對每一個都塞了也個占位圖,而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢微信所有的標(biāo)簽里都有自定義的這兩個屬性是關(guān)鍵是圖片的是圖片的高寬值設(shè)定的,。
打開一篇多圖的微信公眾好文章。在圖片加載過程中,我們發(fā)現(xiàn)微信對每一個img都塞了也個占位圖,而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢?
1.微信所有的img標(biāo)簽里,都有自定義的data-ratio,data-w.這兩個屬性是關(guān)鍵.
//data-w:是圖片的natural width. //data-ratio:是圖片的高/寬值.
2.js設(shè)定img的width=data-w,heigth= width*data-ratio。
3.不過,在第2步設(shè)定寬高之前,請保證img的src屬性有有效的值,不然,第2步會無效,在這里我們添加一個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)對應(yīng)的img的圖片加載完成后,替換掉占位圖,去掉class img_loading 就好了
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89483.html
摘要:打開一篇多圖的微信公眾好文章。在圖片加載過程中,我們發(fā)現(xiàn)微信對每一個都塞了也個占位圖,而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢微信所有的標(biāo)簽里都有自定義的這兩個屬性是關(guān)鍵是圖片的是圖片的高寬值設(shè)定的,。 打開一篇多圖的微信公眾好文章。在圖片加載過程中,我們發(fā)現(xiàn)微信對每一個img都塞了也個占位圖,而且占位圖的寬高就是實(shí)際加載完圖的寬高。這是如何做到的呢? 1.微信所有的i...
閱讀 930·2021-11-22 12:09
閱讀 3704·2021-09-27 13:36
閱讀 1390·2021-08-20 09:37
閱讀 4008·2019-12-27 12:22
閱讀 2353·2019-08-30 15:55
閱讀 2359·2019-08-30 13:16
閱讀 2818·2019-08-26 17:06
閱讀 3434·2019-08-23 18:32