uni-app小程序加载图片优化

这篇具有很好参考价值的文章主要介绍了uni-app小程序加载图片优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:较大的图片加载很慢,会出现较长时间的白屏,体验感差。

uni-app小程序加载图片优化 

解决方案:一进入页面,图片未加载成功前,进行loading…;图片加载完成后会触发@load事件;文章来源地址https://www.toymoban.com/news/detail-511663.html

<template>
  <view class="">
    <image @load="loadImg($event)"  src="../static/image.jpg" mode="widthFix" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  onShow () {
    //开启加载
    uni.showLoading({
      title: '加载中...',
      mask: true
    })
  },
  methods: {
    // 此方法会在图片加载完成后触发
    loadImg (e) {
      uni.hideLoading()
      console.log('图片信息', e)
    },
  },
}
</script>

<style>
</style>

到了这里,关于uni-app小程序加载图片优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 使用webview加载H5打开微信小程序

    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己

    2023年04月18日
    浏览(40)
  • uni-app小程序中做页面滚动底部或顶部加载效果

    在移动应用开发中,无限滚动加载是一个常见的功能,用户可以通过滑动屏幕来加载更多的内容,从而提高应用的用户体验。本文将介绍如何使用Uniapp实现无限滚动加载的功能。 概述 我们需要实现的无限滚动加载功能的具体效果如下: 当用户滑动到底部时,自动加载更多的

    2024年02月08日
    浏览(46)
  • uni-app 小程序主包、分包优化方案

    先看效果 图1  图2是点图1的那个蓝色的字 代码依赖分析看的 好,如果博主这2两张图是你要的效果,来,说说具体操作方案 一、manifest.json加代码,如下,官方的文旦地址点右边---》uni-app官网 二、 目录结构 1、新建一个pageCity(你自己命名) 2、移动你原本的子页面文件(非

    2024年02月15日
    浏览(24)
  • uni-app 微信小程序 保存当前页面为图片

    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webview+html2canvas来完成 先说一下思路,既然在微

    2024年02月11日
    浏览(38)
  • 微信小程序给图片加水印【使用uni-app】

    选择图片后使用canvas绘制图片,再绘制需要的水印文字,将绘制好的画布转化为图片即可 最终效果

    2024年02月10日
    浏览(36)
  • uni-app使用echarts并解决echarts文件过大的问题

    背景 这几天写小程序需要用到echarts,又因为我用uni-app开发,因此研究了好久uni-app引用echarts,遇到了也最终解决了好多bug,我感觉大家应该在使用的时候应该都会遇到,因此专门来写一篇博客,希望可以给大家提供一点帮助!! 第一次写,保证超详细!!! 正文 一、uni-

    2024年02月10日
    浏览(37)
  • uni-app微信小程序-利用canvas给图片添加水印

    选择图片 → 将图片绘制到 canvas 中并绘制水印 →将添加水印的图片绘制到 canvas 中 → 将 canvas 画布转换为图片地址 → 上传/展示操作 注意:微信小程序在选择照片或者唤起相机之前需要获取相应的 权限 利用 uni.getSetting 查看用户是否调用相机的权限(有就选择图片,没有就

    2024年02月06日
    浏览(34)
  • 微信小程序uni-app图片和base64相互转换

    以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。 需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~ 如果教程中有不懂的地方,可添加学习会员小助手咨询(微信:mifankeji77)

    2024年02月14日
    浏览(32)
  • uni-app/微信小程序 实现图片或元素淡入淡出效果

    如题: 直接上代码 html js部分 需要在date中声明好                 current: 0,                 hidepic: null,                 showpic: null 因为是已进入就开始的,所以 要在生命周期中使用 最后一部别忘了,要给需要淡入淡出的元素或者图片设置绝对定位

    2024年02月12日
    浏览(46)
  • uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

    总结一下: 要进行海报绘制离不开canvas,我们是先进行图片,文字的拖拽、旋转等操作 最后再对canvas进行绘制,完成海报绘制。 背景区域设置为 position: relative,方便图片在当前区域中拖动等处理。 添加图片,监听图片在背景区域下的 touchstart touchmove touchend 事件 拖动图片,

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包