In diesem Artikel wird hauptsächlich der Beispielcode für das verzögerte Laden von Bildern im WeChat-Applet vorgestellt. Das Prinzip der Implementierung besteht darin, Bilder vorab über die Seite zu laden, was die Benutzererfahrung verbessert und einen gewissen Referenzwert hat Erfahren Sie mehr
In diesem Artikel wird hauptsächlich das simulierte verzögerte Laden von Bildern im WeChat-Applet vorgestellt. Das Prinzip der Implementierung besteht darin, das Bild (Standardbild) vorab über die Seite zu laden und dann das Originalbild anzuzeigen abgeschlossen, anstatt Lazy Loading im eigentlichen Sinne (Es gibt immer noch eine große Lücke beim Lazy Loading im Web), nur um das Benutzererlebnis zu verbessern.
Verzögertes Laden mehrerer Bilder
1.xml-Seite
<block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode='widthFix' style='display:none' bindload="_imgOnLoad" id='{{item.cover_url}}'></image> <view class='tag-bg {{item.checked?"tag-bg1":""}}'></view> <view class='tag-text fz-30 fwb'>{{item.type_name}}</view> <image class='relative width-100 mgb-20 fade_in {{item.loaded?"":"loading-img"}}' src='{{item.loaded?item.cover_url:item.url}}' mode='widthFix'></image> </block>
2.js-Seite
//ajax请求数据 onLoad: function () { var that = this var page = that.data.page wx.request({ url: request_url, data: { 'signature': signature, 'page':1, 'pageSize': 2 }, success: function (res) { let list = res.data.content for (var i = 0; i < list.length; i++) { list[i].url = "../../img/771.gif" //用json的格式创建url,作为加载过度图片 } that.setData({ list: list, }) } }) }, //监听图片加载页面 _imgOnLoad: function (e) { // console.log(e) var loadedUrl = e.target.id let that = this let list = that.data.list for (var i = 0; i < list.length; i++) { if (list[i].cover_url == loadedUrl) { list[i].loaded = true } that.setData({ list }) } }
Das Obige ist, was ich zusammengestellt für alle Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.
Verwandte Artikel:
Beispiele für die Auswahl von Kontrollkästchen und die Wertübergabe in jQuery+SpringMVC_jquery
So implementieren Sie serverseitiges Rendering mit vue-ssr
So verwenden Sie den Verlauf in der React-Router-Steuerung Routing (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden von Bildern im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!