【小程序】使用uni-app搭建小程序环境-图片懒加载

老兵封心 發表於 2020-4-17 20:29:00

【小程序】使用uni-app搭建小程序环境---图片懒加载

<h2>属性：</h2>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>String</td>
<td> </td>
<td>图片资源地址</td>
<td> </td>
</tr>
<tr>
<td>mode</td>
<td>String</td>
<td>'scaleToFill'</td>
<td>图片裁剪、缩放的模式</td>
<td> </td>
</tr>
<tr>
<td>lazy-load</td>
<td>Boolean</td>
<td>false</td>
<td>图片懒加载。只针对page与scroll-view下的image有效</td>
<td>微信小程序、5+APP、百度小程序、头条小程序</td>
</tr>
<tr>
<td>@error</td>
<td>HandleEvent</td>
<td> </td>
<td>当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}</td>
<td> </td>
</tr>
<tr>
<td>@load</td>
<td>HandleEvent</td>
<td> </td>
<td>当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2>注意事项</h2>
<ul>
<li><code><image></code> 组件默认宽度 300px、高度 225px；<code>app-nvue平台，暂时默认为屏幕宽度</code></li>
<li><code>src</code> 仅支持相对路径、绝对路径，支持 base64 码；</li>
<li>页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 <code>image{will-change: transform}</code> ,可优化此问题。</li>
<li>自定义组件里面使用 <code><image></code>时，若 <code>src</code> 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。</li>
<li>webp格式的图片，app-vue下，iOS不支持，Android支持；app-nvue下，iOS和Android均支持。app-vue下也支持gif。</li>
</ul>
<h2>应用</h2>
<div class="cnblogs_code">
<pre><image lazy-load :src="item.img ? item.img : defaultImg.course"/></pre>
</div>
自定义懒加载
<div class="cnblogs_code">
<pre><template>
<view>
 <view class="uni-padding-wrap">
 <view class="uni-helllo-text" style="padding:30upx 0;">
 延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：
 <text>\n加快页面渲染速度</text>
 <text>\n提升页面滚动性能</text>
 <text>\n默认不下载屏幕外的图片，减少网络流量</text>
 </view>
 </view>
 <view class="uni-list">
 <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
 <view class="uni-media-list">
 <view class="uni-media-list-logo">
 <image class="image" :class="{lazy:!item.show}" :data-index="index" @load="imageLoad" :src="item.show?item.src:''" />
 <image class="image placeholder" :class="{loaded:item.loaded}" :src="placeholderSrc" />
 </view>
 <view class="uni-media-list-body">
 <view class="uni-media-list-text-top">主标题</view>
 <view class="uni-media-list-text-bottom uni-ellipsis">列表二级标题</view>
 </view>
 </view>
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 var imgs = ['shuijiao', 'muwu', 'cbd']
 var list = []

 for (let i = 0; i < 20; i++) {
 list.push({
 src: `https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/${imgs}.jpg`,
 show: false,
 loaded: false
 })
 }

 return {
 windowHeight: 0,
 placeholderSrc: '/static/kechengfengmianmorentu.png',
 list: list,
 show: false
 }
 },
 methods: {
 load() {
 uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
 images.forEach((image, index) => {
 if (image.top <= this.windowHeight) {
 this.list.show = true;
 }
 })
 }).exec()
 },
 imageLoad(e) {
 this.list.loaded = true
 }
 },
 onLoad() {
 this.windowHeight = uni.getSystemInfoSync().windowHeight
 },
 onShow() {
 if (!this.show) {
 this.show = true
 setTimeout(() => {
 this.load()
 }, 100)
 }
 },
 onPageScroll() {
 this.load()
 }
}
</script>

<style>
.placeholder {
 opacity: 1;
 transition: opacity 0.4s linear;
}

.placeholder.loaded {
 opacity: 0;
}

.uni-media-list-logo {
 position: relative;
}

.uni-media-list-logo .image {
 position: absolute;
}
</style></pre>
</div>
 
 
 
 
 
 
相关资料
<ul>
<li>官网image介绍</li>
<li>自定义懒加载效果</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">
 <div>作者：smile.轉角</div>
 <div>出处：https://www.cnblogs.com/websmile/</div>
 <div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.</div>
</div>
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
欢迎关注我，一起进步！扫描下方二维码即可加我QQ
<img class="img_zfb" id="img_zfb" src="https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg">

</div> 
来源：https://www.cnblogs.com/websmile/p/11662933.html

頁: [1]

琼殿技术论坛's Archiver

【小程序】使用uni-app搭建小程序环境---图片懒加载