图片没加载完成,显示loading,

img 图片加载完之后,再执行某些操作

  function showBallDom() {
    Toast.loading('', 0, null, true) // antd mobile的loading
    // 加载完几张图片之后再进行操作,就在数组里写几张图片链接
    let promiseAll = [],
      assetsImageList = [
        'https://123.png',
        'https://234.png',
        'https://345.png',
      ],
      img = [],
      imgTotal = assetsImageList.length
    for (let i = 0; i < imgTotal; i++) {
      promiseAll[i] = new Promise((resolve, reject) => {
        img[i] = new Image()
        img[i].src = assetsImageList[i]
        img[i].onload = function() {
          resolve(img[i])
        }
      })
    }
    Promise.all(promiseAll).then(img => {
      setShowPan(true)
      Toast.hide()
      // timing()
    })
  }
useEffect(() => {
    showBallDom()
  }, [])
在uni-app中实现图片加载显示loading效果,可以通过监听图片加载事件,并在图片开始加载时展示loading动画,当图片加载完成或失败时隐藏loading动画。这里有一个基本的实现步骤: 1. 在页面上添加一个图片组件以及一个用于显示loading的组件(比如一个简单的遮罩层或者动画)。 2. 设置图片组件的`lazy-load`属性为`false`,确保图片加载时触发加载事件。 3. 监听图片组件的`load`事件和`error`事件。在`load`事件触发时,调用一个函数显示loading动画;在`error`事件触发时,同样调用一个函数来处理错误并隐藏loading动画。 4. 实现显示和隐藏loading动画的函数。这通常涉及到控制loading组件的显示和隐藏属性,或者通过改变CSS类来控制其可见性。 以下是一个简单的代码示例: ```html <template> <view> <!-- 显示loading动画的组件 --> <view v-if="showLoading" class="loading-mask"> <!-- 加载动画效果 --> </view> <!-- 图片组件 --> <image class="my-image" mode="aspectFit" src="your-image-url" @load="handleImageLoad" @error="handleImageError" ></image> </view> </template> <script> export default { data() { return { showLoading: false // 控制loading显示的变量 }; }, methods: { // 图片加载开始时执行的函数 handleImageLoad() { this.showLoading = true; // 显示loading动画 // 可以在这里添加更多的逻辑,比如设置定时器隐藏loading等 }, // 图片加载失败时执行的函数 handleImageError() { this.showLoading = false; // 隐藏loading动画 // 处理图片加载失败的逻辑 } } }; </script> <style> /* loading动画的样式 */ .loading-mask { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ display: flex; justify-content: center; align-items: center; } </style> ``` 在上面的代码中,我们定义了两个方法`handleImageLoad`和`handleImageError`来分别处理图片加载的开始和结束事件,从而控制loading动画显示与隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值